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?

Answer 1

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:

1. The data ObservableArray changes (a record is inserted, deleted). An example of this would be using the DataSource.add() or DataSource.remove() functions.

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