Telerik UI for Asp.Net MVC How to retrieve selected row of detail grid - telerik-grid

Question

I need to get the selected row in a detail grid. Here is the master grid:
#(
Html.Kendo().Grid<CN.Models.Competency.ViewModels.AssessmentModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.AssessmentId).Hidden();
columns.Bound(c => c.AssessmentName).Width(250);
columns.Bound(c => c.CompetencyType).Width(80);
columns.Bound(c => c.CompanyName).Width(200);
columns.Bound(c => c.NumOfUnits).Width(50);
columns.Bound(c => c.CompetencyTypeId).Hidden();
columns.Bound(c => c.CompanyId).Hidden();
columns.Template(#<text></text>).Title("Actions").Width(150).ClientTemplate(
"<div class='btn btn-alt3' style='cursor: pointer;' onclick='downloadAssessment()'><i class='lnir lnir-download'></i>Download</div>" +
"# if('" + #IsiCanAdmin + "'== 'True' || ('" + #IsCompanyAdmin + "'== 'True' && CompetencyTypeId == 2 && CompanyId == " + User.companyId + ") ) {#" +
"<div class='btn btn-alt3' style='cursor: pointer;' onclick='editRow()'><i class='la la-edit'></i>Edit</div>" +
"<div id='deleteAssessment' class='btn btn-alt3' style='cursor: pointer;' onclick='deleteAssessment(this)'><i class='la la-trash'></i>Delete</div>" +
"# } #"
);
})
.Height(750)
.Scrollable()
.Sortable()
.Selectable()
.ClientDetailTemplateId("template")
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetAssessmentSearch", "Config", new { area = "Competency" }))
.Model(m => m.Id(o => o.AssessmentId))
)
)
Here is the detail grid:
<script id="template" type="text/kendo-tmpl">
#(
Html.Kendo().Grid<CN.Models.Competency.ViewModels.AssessmentUnitModel>()
.Name("grid_#=AssessmentId#")
.Columns(columns =>
{
columns.Bound(o => o.UnitId).Hidden();
columns.Bound(o => o.UnitName).Width(350).Sortable(true);
columns.Bound(o => o.CompetencyType).Width(75);
columns.Bound(o => o.CompanyName).Width(200).Sortable(true);
columns.Bound(o => o.GapClosureThreshold).Width(50);
columns.Bound(o => o.NumEvidences).Width(50);
columns.Template(#<text></text>).Title("Actions").Width(150).ClientTemplate("#=editUnit(data)#");
})
.Scrollable()
.ClientDetailTemplateId("evidenceTemplate")
.DataSource(dataSource=>dataSource
.Ajax()
.Read(read=>read.Action("GetAssessmentUnits", "Config", new { area = "Competency", AssessmentId = "#=AssessmentId#" }))
.Model(m=>m.Id(o=>o.UnitId))
)
.ToClientTemplate()
)
Here is what I tried:
function editUnit(item) {
if ("#IsiCanAdmin" === "True") {
return "<div class='btn btn-alt3' style='cursor: pointer;' onclick='UnitEditRow(this)'><i class='la la-edit'></i>Edit</div>";
}
}
function UnitEditRow(item) {
var data1;
var grid = $("#grid").data('kendoGrid');
var allChildren = $(grid.element[0]).find('input.checkChild:selected')
$.each(allChildren, function () {
var detailRow = $(this).closest('tr');
var table = $(this).closest('div.k-grid');
var detailGrid = $(table).data('kendoGrid');
//var allSelected = detailGrid.select();
data1 = detailGrid.dataItem(detailRow);
});
var unitId = data1.UnitId;
openUnit(unitId)
}

Answer 1

Added a "DataBound" event to the detail grid to handle the hide/show of the button:
#(
Html.Kendo().Grid<CN.Models.Competency.ViewModels.AssessmentUnitModel>()
.Name("grid_#=AssessmentId#")
.Columns(columns =>
{
columns.Bound(o => o.UnitId).Hidden();
columns.Bound(o => o.UnitName).Width(350).Sortable(true);
columns.Bound(o => o.CompetencyType).Width(75);
columns.Bound(o => o.CompanyName).Width(200).Sortable(true);
columns.Bound(o => o.GapClosureThreshold).Width(50);
columns.Bound(o => o.NumEvidences).Width(50);
columns.Template(#<text></text>).Title("Actions").Width(150).ClientTemplate("<div class='btn btn-alt3 editClass' style='cursor: pointer;' onclick='editRow(this)'><i class='la la-edit'></i>Edit</div>");
})
.Selectable()
.Scrollable()
.ClientDetailTemplateId("evidenceTemplate")
.DataSource(dataSource=>dataSource
.Ajax()
.Read(read=>read.Action("GetAssessmentUnits", "Config", new { area = "Competency", AssessmentId = "#=AssessmentId#" }))
.Model(m=>m.Id(o=>o.UnitId))
)
.Events(e => e.DataBound("onDetailDataBound"))
.ToClientTemplate()
)
function onDetailDataBound() {
if ("#IsiCanAdmin" != "True") {
var editButtons = $(".editClass");
for (var i = 0; i < editButtons.length; i++) {
$(editButtons[i]).css("display", "none");
}
}
}
The use the button to find the closest row and table to get the dataItem:
function editRow(button) {
var buttonDiv = $(button)[0];
var row = $(buttonDiv).closest('tr');
var table = $(buttonDiv).closest(".k-grid");
var grid = $(table).data("kendoGrid");
var dataItem = grid.dataItem(row);
var unitId = dataItem.UnitId;
}