JSFiddle - React, Tailwind, and code Playground

by valchev

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css">
<div id="grid"></div>

JavaScript

var data = [
    {id: 1, foo: 4, bar: "A"},
    {id: 2, foo: null, bar: "B"},
    {id: 3, foo: 6, bar: "C"},
    {id: 4, foo: 2, bar: "E"},
    {id: 5, foo: null, bar: "F"}
];

$("#grid").kendoGrid({
    dataSource: {
        schema: {
            model: {
                fields: {
                    id: {type: "number"},
                    foo: {type: "number"},
                    bar: {type: "string"} 
                }
            }                
        },
        data: data
    },
    columns: [
        "id", 
        {field: "foo", footerTemplate: "#= calcAverage() #"}, 
        "bar"
    ]
});

function calcAverage() {
    var grid = $("#grid").data("kendoGrid"),
        records = grid.dataSource.view(),
        total = 0,
        count = 0,
        currRecord;
    
    for(var i = 0; i < records.length; i++) {
        currRecord = records[i];
        if(currRecord.foo != null) {
            total += currRecord.foo;
            count++;
        }
    }

    return total/count;
}