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.

I posted a response below. It does change the format of your code a bit in order to achieve what you want. If you have any specific questions around how to get it to work within your current setup, please let me know. — Daniel Brown, Sep 25 '15 at 13:34

Daniel Brown · Accepted Answer · 2015-10-01T20:51:14.487

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/

Okay, thanks very much for this! My setup is very complicated, the file got about 1600 lines... But in fact it seems that the simple line * autoBind: false * fix my problem ... — chris, Oct 01 '15 at 20:38

score 5 · Answer 2 · answered Oct 01 '15 at 13:50

5

Set autoBind: false so that the grid doesn't auto-bind.

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

answered Oct 01 '15 at 13:50

ryuu9187

1,162
7
15

simple, but it seems to fix this problem! sorry about that :-/ – chris Oct 01 '15 at 20:35
2

it's all about sharing information and helping each other out :) – ryuu9187 Oct 02 '15 at 13:43

Knockout Kendo Grid dataBound events

2 Answers2