Kendo UI: Not able to add footerTemplate to grid

Question

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 soon as I add the footerTemplate, it stops working.

Inside the aggregateResult object I am getting the value of count. But then how shall I add it to the footerTemplate?

Kindly help me out.

Thanks!!

Answer 1

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

Answer 2

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