This is a migrated thread and some comments may be shown as answers.

Event binding lost after fast row refresh

1 Answer 330 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Erkan
Top achievements
Rank 1
Erkan asked on 07 Apr 2020, 06:06 PM

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

1 Answer, 1 is accepted

Sort by
0
Erkan
Top achievements
Rank 1
answered on 07 Apr 2020, 09:13 PM

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();

 

Tags
Grid
Asked by
Erkan
Top achievements
Rank 1
Answers by
Erkan
Top achievements
Rank 1
Share this question
or