Kendo GridBound Night Data

Question

I have a kendo ui grid using knockout-kendo .

I have several custom buttons in one grid column, i.e. make an ajax call to edit the entry in another div, delete one, or check that editId calls the function. My problem: that both events were fired twice ! Also, for me, it looks like a dataBound event and the dataBinding event dataBinding the same.

Heres a fiddle

 this.dataBound = function(){ alert('dataBound'); }; this.dataBinding = function(){ alert('dataBinding'); }; 

I tried several different approaches.

Here is another fiddle

 this.gridConfig = { data: self.myData, datasource: { data: 'data' }, dataBound: function(){ alert('dataBound'); }, dataBinding: function(){ alert('dataBinding'); }, }; 

Events are fired when the grid is bound and when the data is bound. But how can I be sure to get only the event when all the data is there?

Does anyone know what is going on there? BTW I am using a display plugin.

Answer 1

The dataBound event is dataBound for various reasons. When you first start, if you have a console.log() event, you will see that:

• e.sender._data - empty array []
• e.element[0] div.k-grid.k-widget

When the event fires a second time, the same properties are displayed as:

• e.sender._data is an array of length three that contains elements such as: { color: "green", name: "apple", uid: "..." }
• e.element[0] - div.k-grid.k-widget (same element)

Which, apparently, means that your grid actually binds the data to itself twice.

If I had to guess, KO ko.applyBindings(new ViewModel()); initializes the object and fires the event. After that, the event fires again when kendo tries to bind the data of the elements inside.

To avoid this, see http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-dataBound

Where you can use something similar to:

 var grid = $("#grid").data("kendoGrid"); grid.bind("dataBinding", grid_dataBinding); grid.dataSource.fetch(); 

If the initial configuration binding is set to autoBind: false

So, you will not accidentally catch this first false dataBound event.

If I have time, I will return to the JSFiddle, which will demonstrate this.

Solution 1: This Fiddle should help.

Solution 2:

Set autoBind: false so that the grid is not automatically snapped. (@ Jason9187)

As another user is mentioned, you can disable the initial automatic linking by changing the setting specified in the telerik documentation above:

Basically this fix is ​​in your first approach:

<div id="grid" data-bind="kendoGrid: { data: myData, dataBinding: dataBinding, dataBound: dataBound }"></div>

becomes:

<div id="grid" data-bind="kendoGrid: { data: myData, dataBinding: dataBinding, dataBound: dataBound, autoBind: false }"></div>

Or adding the same property to your second approach.

Fiddle: http://jsfiddle.net/hXn7e/45/

Answer 2

Set autoBind: false so that the grid is not automatically snapped.

 this.gridConfig = { data: self.myData, autoBind : false, datasource: { data: 'data' }, dataBound: function(){ alert('dataBound'); }, dataBinding: function(){ alert('dataBinding'); }, };