Kendo UI dataSource changed event: is it working?

Question

Is the dataSource.changed event working?

After my Kendo UI grid is instantiated, I am binding the change event per the documentation here:

http://docs.kendoui.com/api/framework/datasource#change

//To set after initialization
dataSource.bind("change", function(e) {
    // handle event
});

I am doing this:

// initialize
$("#grid").kendoGrid({
        dataSource: dataSource, 

        blah blah blah
)

});
// end of initialization



// bind afterwards
 var grid = $('#grid').data('kendoGrid');
  grid.dataSource.bind("change", function (e) {
      dataChanged();
  });


 //also tried a setTimeout:

  // bind afterwards
  setTimeout(function () {
    var grid = $('#grid').data('kendoGrid');
    grid.dataSource.bind("change", function (e) {
        dataChanged();
    });
}, 350);



 function dataChanged() {
   // handle "change" whatever that means -- documentation definition is hazy
   // does reassigning the data array constitute a change?
   // does changing the value of a particular item in the data array
   // constitute a change?
   // does removing an item from the data array constitute a change?

    var grid = $("#grid").data("kendoGrid");
    grid.refresh();
 }

But my dataChanged() function is not called when I do either of these things:

var grid = $('#grid').data('kendoGrid');
grid.dataSource.data()[1]["deptname"] = 'XXX';

or

grid.dataSource.data = aDifferentArray;

I am not sure exactly what the 'changed' event is listening for. What, precisely, is supposed to trigger it?

If I create a completely new dataSource, and assign it to the grid that already has a dataSource, I don't see how that would trigger an existing data source's changed event. Such an event (the grid noticing that its dataSource has been replaced with a different one) would be a grid-level event, not a dataSource-level event, right?

score 9 · Accepted Answer · edited Oct 02 '13 at 13:08

9

The important thing to note is that the data backing the DataSource is an ObservableArray, and that the data items in that array are converted to ObservableObjects.

The change event of the datasource is fired under 2 conditions:

The data ObservableArray changes (a record is inserted, deleted). An example of this would be using the DataSource.add() or DataSource.remove() functions.
If a property changed event bubbles up to the DataSource from one of the ObservableData objects in the array. However, just like the rest of the Kendo MVVM framework, the notification that a property changed only occurs when its .set("propertyName", value) function is called.

This is why grid.dataSource.data()[1]["deptname"] = 'XXX'; is not triggering the change event. If you change it to: grid.dataSource.data()[1].set("deptname", 'XXX'); then it should start to work. Basically, think of the change event as being fired in response to an MVVM property change fired from the data observable object.

As for changing the data array grid.dataSource.data = aDifferentArray; I'm actually not sure if that will or should trigger a change. I've never tried that.

edited Oct 02 '13 at 13:08

thomaux

19,133
10
76
103

answered Dec 15 '12 at 15:49

CodingWithSpike

42,906
18
101
138

thank you for the clarification. The `.set` method does trigger the change event whereas `grid.dataSource.data = aDifferentArray` does not, as far as I can tell. I hope there is in Kendo grid an equivalent to DataSource_Changed event in WinForms grids--fired when the grid is assigned a different datasource, because I am hoping to refresh the grid with new data every 60 seconds: http://stackoverflow.com/questions/13892021/kendo-ui-grid-refreshing-grid-data-every-60-seconds-with-new-data-datasource-a/13892541#comment19140263_13892541 – Tim Dec 16 '12 at 03:02
2

Actually, to swap out the data, I think you use the `.data()` function: http://docs.kendoui.com/api/framework/datasource#data so your code would be `grid.dataSource.data(aDifferentArray);` – CodingWithSpike Dec 16 '12 at 03:11
has anyone considered using kendo.Observable? i'm trying to put my datasource as an observable so whenever there's a change it will update the view model – add-Naan Jul 13 '16 at 21:01

Kendo UI dataSource changed event: is it working?

1 Answers1