Kendo Grid, Virtual Scrolling, Page Size and Aggregates

Question

When I have virtual scrolling turned on for a kendo grid that has a data source defined with a page size, when I scroll and the virtual paging occurs, it changes my grand totals in the aggregate footer template to match the totals in the page size. These values are correct when the grid is initially created. Is there a way to lock down these aggregate values so they don't change when the virtual paging happens?

It would help to know what your grid configuration looks like. Are you creating the widget using the ASP MVC helpers or are you creating it in javascript? — Brett

Jayesh Goyani Jayesh Goyani · Accepted Answer · 2013-08-23T12:13:10

Using MVC

Please try with the below link. http://developerom.blogspot.in/2012/12/how-to-use-aggregate-function-in-kendo.html

Let me know if any concern.

Using Jquery

<div id="grid">
</div>

<script>


function onDataBound(arg) {

    var UnitPrice = 0; // sum
    var UnitsOnOrder = 0; //average
    var total = arg.sender.dataSource._data.length; // total

    for (var i = 0; i < total; i++) {
        UnitPrice += parseInt(arg.sender.dataSource._data[i].UnitPrice);
        UnitsOnOrder += parseInt(arg.sender.dataSource._data[i].UnitsOnOrder);
    }

    $("#spanProductNamefooter").html('Total count: '+total);
    $("#spanUnitPricefooter").html('Sum: '+UnitPrice);
    $("#spanUnitsOnOrderfooter").html('average: '+parseInt(UnitsOnOrder/total));
}

function onDataBinding(arg) {

}

$(document).ready(function () {
    $("#grid").kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
                read: "http://demos.kendoui.com/service/Northwind.svc/Products",
                dataType: "jsonp",
            },
            schema: {
                model: {
                    fields: {
                        UnitsInStock: { type: "number" },
                        ProductName: { type: "string" },
                        UnitPrice: { type: "number" },
                        UnitsOnOrder: { type: "number" },
                        UnitsInStock: { type: "number" }
                    }
                }
            },
            pageSize: 7,
            aggregate: [{ field: "ProductName", aggregate: "count" },
                                      { field: "UnitPrice", aggregate: "sum" },
                                      { field: "UnitsOnOrder", aggregate: "average" },
                                      { field: "UnitsInStock", aggregate: "min" },
                                      { field: "UnitsInStock", aggregate: "max"}]
        },
        sortable: true,
        height: 430,
        dataBound: onDataBound,
        dataBinding: onDataBinding,
        scrollable: {
            virtual: true
        },
        columns: [
                        { field: "ProductName", title: "Product Name", footerTemplate: "<span id='spanProductNamefooter'></span>"},
                        { field: "UnitPrice", title: "Unit Price",footerTemplate: "<span id='spanUnitPricefooter'></span>" },
                        { field: "UnitsOnOrder", title: "Units On Order", footerTemplate: "<span id='spanUnitsOnOrderfooter'></span>"},
                        { field: "UnitsInStock", title: "Units In Stock"}
                    ]
    });
});
</script>

Let me know if any concern.

Kendo Grid, Virtual Scrolling, Page Size and Aggregates

1 Answers