在 Kendo Grid 中添加不绑定的复选框列答案

【问题标题】：Add checkbox column without binding in Kendo Grid在 Kendo Grid 中添加不绑定的复选框列
【发布时间】：2014-06-26 13:16:07
【问题描述】：

我尝试在我的剑道网格中添加一个复选框列。我使用此链接中的代码：

http://www.telerik.com/support/code-library/select-grid-rows-using-checkboxes-and-preserve-it-between-the-pages

但它不适用于剃须刀页面。这是我的代码：

cshtml：

      @(Html.Kendo().Grid<IQuestArchive>().Name("archivesGrid")
        .DataSource(dataSource => dataSource.Ajax().Read(read => read.Action("Archives_Read", "Home").Type(HttpVerbs.Get))
        .Sort(sort => sort.Add("Name").Ascending())).Columns(columns =>
            {
                columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' class='checkbox'/>").Title("<input type='checkbox'/>").Width(10);
                columns.Bound(request => request.ReadableName).Title("Name");
            }).Sortable().Selectable(builder => builder.Mode(GridSelectionMode.Multiple).Type(GridSelectionType.Row)))

脚本：

   //bind click event to the checkbox
   $("#archivesGrid").table.on("click", ".checkbox" , selectRow);

   //on click of the checkbox:
    function selectRow() {
        var checked = this.checked,
            row = $(this).closest("tr"),
            grid = $("#archivesGrid").data("kendoGrid"),
            dataItem = grid.dataItem(row);

        checkedIds[dataItem.id] = checked;
        if (checked) {
            //-select the row
            row.addClass("k-state-selected");
        } else {
            //-remove selection
            row.removeClass("k-state-selected");
        }
    }

我不明白出了什么问题，如果我与链接中的代码进行比较之前它的逻辑完全相同...：s

【问题讨论】：

您需要您的剑道网格小部件的参考。为此，请使用以下代码： $("#archivesGrid").data("kendoGrid")

标签： c# asp.net-mvc razor kendo-ui kendo-grid

【解决方案1】：

你需要仔细看看；我可以告诉你一个区别；你在做

$("#archivesGrid").table.on("click", ".checkbox" , selectRow);

而演示是这样的

var grid = $("#grid").kendoGrid({
//...
}).data("kendoGrid");

//bind click event to the checkbox
grid.table.on("click", ".checkbox" , selectRow);

了解代码的作用很重要，这样您才能对其进行调试。 JQuery 元素没有 table 属性。它是 Kendo UI 网格小部件的属性。

【讨论】：