Kendo Ui: Not Able To Add Footertemplate To Grid

I am trying to display the count of the field in the footerTemplate. Follow is the fiddle: http://jsbin.com/ajoyug/8/edit However, without the footerTemplate it works fine. But as

Solution 1:

The problem is with your approach the grid is rendered twice, the first time on Kendo UI initialization (implicit during the first bind) and the second when you bind the actual data.

The first time the data is still not available and then it fails.

If anyway you want to follow that path you should do:

<div id="myListView" data-role="grid" class="transaction-grid"
     data-columns="[
            { field: 'name', title: 'Name', width:'20%' },
            { 
                field: 'age',
                title: 'Age' , 
                width:'35%', 
                footerTemplate: 'Total Count: # if (data.age) { # #= age.count # # } #'  
            }
            ]"
     data-bind="source: dataSource">
</div>

i.e. check if data.age is available and then is when you print it.

Otherwise, I recommend following @UmankantPatil suggestion and do not use data-* but JavaScript for initializing the widgets and binding data.

Check it in the modified version of your JSBin here

Solution 2:

I could not explain why it's not working. But I have tried doing your example by other way and it works well.

Here goes the link.

http://jsbin.com/ajoyug/35/edit