Knockout Kendo Grid dataBound events

Question

I have a kendo ui grid using the knockout-kendo set.

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

Heres a fiddle

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

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

I tried some different approaches.

Heres 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 get sure, to get only an Event when all data is there?

Does anyone know whats going on there? BTW I using the mapping plugin.

Answer 1

The dataBound event is firing for different reasons. The first time it fires, if you console.log() the event, you will see that:

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

When the event fires for a second time, the same properties show as:

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

Which seems to imply that your grid is in-fact binding data to itself twice.

If I had to guess, KO's ko.applyBindings(new ViewModel()); initializes the object and triggers the event. Afterwards, the event is fired again when kendo attempts to bind the elements data internally.

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

Where you could employ something similar to:

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

When the initial config binding is set to autoBind: false

So that you don't accidentally catch that first false dataBound event.

If I have time, I'll make my way back with a JSFiddle that demonstrates this.

Solution 1: This Fiddle should help.

Solution 2:

Set autoBind: false so that the grid doesn't auto-bind. (@jason9187)

As another user mentioned, you can turn the initial auto-bind off by changing a setting that is mentioned in the above telerik documentation:

Basically, this fix 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 by adding the same property to your second approach.

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