How to get the event handler when grid is filtered in client side in Kendo grid?

Question

I have create a simple grid here and I want to recalculate the sum of a column when the grid is filtered locally. I do not want to have calculated column or template since I want to update a label and as well I have to do some other actions in the page when grid is filtered locally.

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/

How to get the event handler when grid is filtered in client side?

Answer 1

In the function that computes the sum, you should use grid.dataSource.view() instead of grid.dataSource.data() .

Your JSFiddle modified here: http://jsfiddle.net/OnaBai/gb3qzgm2/1/

According Kendo UI documentation: data()

Returns Gets the data items of the data source.

whereas view()

Returns the data items which correspond to the current page, filter, sort and group configuration

Then, if you want to automatically update the label, you might invoke getSum from the grid dataBound event handler as in this other version of your JSFiddle: http://jsfiddle.net/OnaBai/gb3qzgm2/2/

Answer 2

I only made a couple of minor changes to your code, these changes accommodate the way Kendo mandates when we can inject our own custom javascript before it generates the "Kendo revised/generated" javascript string:

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
}