javascript - Knockout Kendo Grid dataBound events - Stack Overflow

admin管理员组

文章数量:1245106

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 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.

• javascript
• knockout.js
• kendo-ui
• knockout-kendo

Share Improve this question Follow edited Sep 24, 2015 at 13:39 chris asked Aug 7, 2015 at 9:12 chrischris 4,86777 gold badges3636 silver badges5656 bronze badges 1

• 1 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 Commented Sep 25, 2015 at 13:34

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10 +50

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./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>

Bees:

<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/hXn7e/45/

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');
    },
};

本文标签： javascriptKnockout Kendo Grid dataBound eventsStack Overflow