在Kendo Grid中添加复选框列而不绑定(Add checkbox column without binding in Kendo Grid)

在Kendo Grid中添加复选框列而不绑定(Add checkbox column without binding in Kendo Grid)

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

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之前进行比较

I try to add a checkbox column in my kendo grid. I use the code in this link :

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

But it doesn't work with a razor page. Here's my code :

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

script:

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

I don't understand what's going wrong and if I compare with the code in link before it's exactly the same logic...:s

最满意答案

你需要仔细看看; 我可以告诉你一个不同之处; 你在做

$("#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元素没有表属性。 它是Kendo UI网格小部件的属性。

You need to take a closer look; I can tell you one difference; you're doing

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

whereas the demo does

var grid = $("#grid").kendoGrid({ //... }).data("kendoGrid"); //bind click event to the checkbox grid.table.on("click", ".checkbox" , selectRow);

It's important to understand what the code is doing so you can debug it. JQuery elements don't have a table property. It's a property of the Kendo UI grid widget.