2014-06-26 90 views
0

我嘗試在我的劍道網格中添加一個複選框列。我使用的代碼在此鏈接:在Kendo Grid中添加沒有綁定的複選框列

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

+0

您需要參考您的劍道網格小部件。爲此,請使用以下代碼:$(「#archivesGrid」)。data(「kendoGrid」) –

回答

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元素沒有表屬性。這是Kendo UI網格部件的屬性。