用于 Asp.Net MVC 的 Telerik UI 如何检索详细信息网格的选定行

问题描述

我需要在详细信息网格中获取所选行。这是主网格：

            @(
            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))
            )
        )

这里是细节网格：

<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",new { area = "Competency",AssessmentId = "#=AssessmentId#" }))
        .Model(m=>m.Id(o=>o.UnitId))
    )
    .ToClientTemplate()
)

这是我尝试过的：

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

解决方法

在细节网格中添加了一个“DataBound”事件来处理按钮的隐藏/显示：

@(
    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");
        }
    }
}

使用按钮查找最近的行和表来获取数据项：

    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;

}