如何在Kendo網格中的客戶端過濾網格時獲取事件處理函數？

Question

我在這裏創建了一個簡單的網格，我想在本地過濾網格時重新計算列的總和。我不想計算列或模板，因爲我想更新標籤，而且我必須在網頁在本地過濾時在頁面中執行一些其他操作。

var data = [ 
    { item: "item1", weight: 15 }, 
    { item: "item2", weight: 22 }, 
    { item: "item3", weight: 43 }, 
    { item: "item4", weight: 37 }, 
    { item: "item5", weight: 33 } 
]; 
$("#grid").kendoGrid({ 
    columns: [ 
     { field: "item" }, 
     { field: "weight" } 
    ], 
    filterable: true,      
    sortable: true, 
    pageable: true, 
    resizable:true, 
    selectable: "row", 
    columnMenu: true, 
    dataSource:data , 
    change: function(e) { 
     var grid = e.sender; 
     var selected = grid.dataItem(this.select()); 
     alert(selected.item); 
     getSum(); 
    } 
}); 
getSum(); 
function getSum() { 
    var grid = $("#grid").data("kendoGrid"); 
    var data = grid.dataSource.data(); 
    var sum = 0; 
    for (var i = 0; i<= (data.length-1);i++) 
    { 
     sum = sum + data[i].weight;  
    } 
    $("#weight-label").text(sum); 
} 

http://jsfiddle.net/KendoDev/gb3qzgm2/

如何獲得事件處理程序時，網格客戶端進行過濾？

Answer 1

在計算總和的函數中，應該使用grid.dataSource.view()而不是grid.dataSource.data()。

你的jsfiddle修改此處http://jsfiddle.net/OnaBai/gb3qzgm2/1/

根據劍道UI文件：data()

返回獲取數據源的數據項。

而view()

返回對應於當前頁面的數據項，篩選，排序和組配置

然後，如果你想自動更新標籤，你可能從網格中調用getSumdataBound事件處理程序與您的JSFiddle的此其他版本一樣：http://jsfiddle.net/OnaBai/gb3qzgm2/2/

Answer 2

我只是做了一個微小的改動你的代碼，這些變化適應的方式劍道任務時，它產生之前，我們可以注入自己的自定義JavaScript「修訂劍道/生成」 JavaScript字符串：

http://jsfiddle.net/gb3qzgm2/4/

var data = [{ 
    item: "item1", 
    weight: 15 
}, { 
    item: "item2", 
    weight: 22 
}, { 
    item: "item3", 
    weight: 43 
}, { 
    item: "item4", 
    weight: 37 
}, { 
    item: "item5", 
    weight: 33 
}]; 
$("#grid").kendoGrid({ 
    columns: [{ 
     field: "item" 
    }, { 
     field: "weight" 
    }], 
    filterable: true, 
    sortable: true, 
    pageable: true, 
    resizable: true, 
    selectable: "row", 
    columnMenu: true, 
    dataSource: data, 
    change: function (e) { 
     var grid = e.sender; 
     var selected = grid.dataItem(this.select()); 
     alert(selected.item); 
     var s = getSum(); 

     $("#weight-label, .k-pager-info").text('The Sum is: ' + s); 
    } 
}); 
//getSum(); 

function getSum() { 
    var grid = $("#grid").data("kendoGrid"); 
    var data = grid.dataSource.data(); 
    var sum = 0; 
    for (var i = 0; i <= (data.length - 1); i++) { 
     sum = sum + data[i].weight 
    } 
    return sum 
}