Kendo網格的dataBound事件在每一頁上被觸發改變和排序

我正在使用MVC劍道網格，我試圖添加選擇全部/取消選擇複選框到標題。我有JavaScript的選擇邏輯&取消選中所有單獨的複選框。我也想基於行中的複選框來選擇/取消選中標題複選框。由於網格初始化期間網格行未知，因此我們無法將單擊事件附加到行中的各個複選框。數據綁定到網格後，我們必須這樣做。我還想在用戶瀏覽頁面或排序時保持複選框的狀態。（因爲這種分頁&排序在客戶端完成，服務器操作設置爲false） JavaScript工作正常。我在電網的dataBound事件中將此javascript調用爲telerik支持的建議here。但是，每次更改和排序dataBound事件時都會觸發。根據文檔here，它應該在小部件綁定到dataSource時被觸發。所以我嘗試了dataSource的requestEnd事件，但是requestEnd事件也是在每一頁上被更改爲&排序。再次，根據文檔here它應該只在遠程服務請求完成時被觸發。Kendo網格的dataBound事件在每一頁上被觸發改變和排序

那麼，我應該使用哪個事件來調用JavaScript，以便JavaScript只執行一次，或者有其他方式來執行此操作。

$(function() { 
    $gridElement = $("#grid"); 
    var kendoGrid = $gridElement.data("kendoGrid"); 
    var dataSource = kendoGrid.dataSource; 

    kendoGrid.bind("dataBound", function (e) {   
      configureSelectCheckBoxes($gridElement) 
    } 
    }) 

    $("#btnSearch").click(function() { 
     kendoGrid.dataSource.read(); 
     kendoGrid.refresh(); 
     kendoGrid.dataSource.page(1); 
    }) 


    function configureSelectCheckBoxes(grid) { 
     // attach click event to select all check box 
     grid.find("thead input:checkbox").click(
      function() { 
       grid.find("td input:checkbox").prop("checked", $(this).prop("checked")); 
     }); 

     // attach click event to individual check box 
     grid.find("tbody input:checkbox").click(function() { 
        var checkedCount = grid.find("td input:checkbox:checked").length; 
        var totalCount = grid.find("td input:checkbox").length; 
        grid.find("th input:checkbox").prop("checked", checkedCount === totalCount); 
      } 
    ); 
}

}）

@(Html.Kendo().Grid<MVCPOC.Models.MyModel>() 
     .Name("grid") 
     .Columns(col => 
     { 
      col.Bound(p => p.ModelID) 
       .ClientTemplate("<input class='chkbox' type='checkbox' value='#=ModelID#' />") 
       .HeaderTemplate("<input type='checkbox' id='selectAll' />") 
       .Width(30) 
       .Sortable(false) 
       .Filterable(false);     
      col.Bound(p => p.StateProvinceCode);     
      col.Bound(p => p.EmailAddress); 
     }) 
     .AutoBind(false) 
     .Pageable() 
     .Sortable() 
     .Scrollable(x => x.Height(300)) 
     .HtmlAttributes(new { style = "height:500px" }) 
     .DataSource(dataSource => dataSource 
      .Ajax() 
      .ServerOperation(false) 
      .PageSize(20) 
      .Read(read => read 
       .Action("GetData", "Grid"))) 

    )

來源

2015-06-30 LP13

它應該實際上工作。你有沒有嘗試在小部件代碼中指定事件？ .Event（e => e.OnDataBound（「configureSelectCheckBoxes」）） – Vanice

@Vanice我沒有嘗試過，我保持從cshtml視圖分離任何JavaScript。所以我在widget初始化後在.js文件中附加了databound事件。 – LP13

您可能會認爲它是爲了便於閱讀。我喜歡在查看小部件代碼時看到所有事件。實際的代碼可以在.js文件中。你能提供一個小提琴或演示項目嗎？ – Vanice

我從你的問題理解的是，你需要停止對綁定的事件數據。如果我理解它是正確的，那麼下面的技巧將對你有用。

你只需要類別覈對（數據源）像下面（它的JS解決方案，只顯示招數）：

dataBound: function (e) { 
    if (e.sender.dataSource.sort() == undefined) { 
      // It indicates that grid is loaded first time, no sort trigger is fired. 
    } 
}

注：如果您已經爲某種然後設置默認列你需要添加條件因此檢查該列的排序，因爲那裏的條件可能不正確。

來源

2016-03-31 13:06:28

Kendo網格的dataBound事件在每一頁上被觸發改變和排序

回答

相關問題