Event binding lost after fast row refresh

[Erkan]

I have a grid with several columns. The last column has a button that opens a new row with details from the row and external sources inside. Inside the details row, I have a button that updates one of the columns. After update, I use the function that's posted here (https://docs.telerik.com/kendo-ui/knowledge-base/grid-update-particular-row-without-refresh) to refresh the row without making another call to show the changes.

Everything works, all columns show the correct values. The button content comes from a x-kendo-template:

<script id="template" type="text/x-kendo-template">
        <div>
            <button class="btn btn-default " data-bind="events: {click: viewDetails}">View Details</button>
        </div>
</script>

Because this column has a template, the following line in the kendoFastReDrawRow method in the link above is called:

// Render using template

cell.html(kendoTemplate(dataItem));

 

this puts the template back to the button but when I use the Kendo MVVM utility in Chrome Dev Tools, I see there is no data bound, so the click event does not work.

If I call kendo.bind(cell, dataItem) after that line, that puts the binding back, but the click event produces a JQuery error:

Uncaught TypeError: ((b.event.special[i.origType] || {}).handle || i.handler).apply is not a function

It seems like JQuery doesn't understand the click handler, and I can see that in the Event Listeners tab in Chrome Dev Tools, the click handler isn't there.

 

Is it not possible to get event bindings after an update with kendo.template or am I missing something?

ps. We are using Kendo UI v2015.2.805, update currently is not possible

[Erkan]

I found the solution. After updating the row data, the grid needs to be re-rendered with current data items. So calling refresh method fixes the problem.

 

var grid = $("#grid").data("kendoGrid");
grid.refresh();