kendo grid column: how to data bind click event in

Question

Kendo Grid columns' data-bind click event in the footer template is not working.

Please see the example http://dojo.telerik.com/ALAZo

The click event on column template for price is working fine but not for the footer template for the same.

Any resolution which uses MVVM binding would be greatly appreciated

Answer 1

By default, the header and footer of the Grid are not bound to the ViewModel. A workaround is to find the footer with an appropriate jquery selector after the grid has been initialised and then bind it manually. So something like this:

kendo.bind($("body"), viewModel);
kendo.bind($("#grid").find(".k-grid-footer"), viewModel);

Here I've added id="grid" to your grid declaration like so in order to find it:

<div id="grid" data-role="grid" data-bind="source:dataSource"

Answer 2

I have reworked your example in order to get a solution where click event works on both column and footer template.

<a onclick='test()'... seems to do the trick.