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

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)
}

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;

}