kendo ui - Why is the KendoUI DataSource change event not raised after data a dataitem is modified? -

i have put jsfiddle demonstrates change event not being fired when data item modified.

go fiddle , see grid , links under grid. click on each 1 of links in order, , see modify operation happen, change event not raised. can see modification did happen, when click on refresh grid link. add/remove operations refreshing grid not needed, , change event raised.

how can change event raised when dataitem modified?

regards,

scott

http://jsfiddle.net/codeowl/gfpdc/108/

for reason stackoverflow saying that: "links jsfiddle.net must accompanied code"

markup:

<div id="kendogrid"></div>  <p>&nbsp;</p> <ul>     <li><a id="lnkwireupdatasource" class="link">wire datasource</a><br /></li>     <li><a id="lnkaddrecord" class="link">add record</a></li>     <li><a id="lnkmodifyrecord" class="link">modify record</a></li>     <li><a id="lnkrefreshgrid" class="link">refresh grid</a></li>     <li><a id="lnkremoverecord" class="link">remove record</a></li> </ul> 

javascript:

var _data = [         { users_id: 1, users_fullname: 'bob smith', users_role: 'administrator'  },         { users_id: 2, users_fullname: 'barry baker', users_role: 'viewer'  },         { users_id: 3, users_fullname: 'bill cow', users_role: 'editor'  },         { users_id: 4, users_fullname: 'boris brick', users_role: 'administrator'  }     ],     _datasource = new kendo.data.datasource({ data: _data });  $('#kendogrid').kendogrid({     datasource: _datasource,     columns: [         { field: "users_fullname", title: "full name" },         { field: "users_role", title: "role", width: "130px" }     ] });  $('#lnkrefreshgrid').click(function () {     $("#kendogrid").data("kendogrid").refresh(); });  function datasourcechange(e,a,b) {     var _data = this.data();     console.log('change event raised | action: '+e.action+' | data length: '+_data.length); }  function datasource_error(e) {     console.log('error event raised: '+e.status); }  $('#lnkwireupdatasource').click(function () {     _datasource.bind('change', datasourcechange);     _datasource.bind('error', datasource_error);     _datasource.fetch(); });  $('#lnkaddrecord').click(function () {     _datasource.add({ users_id: 5, users_fullname: 'bert bird', users_role: 'viewer' }); }); $('#lnkmodifyrecord').click(function () {     var _dataitem = _datasource.at(_datasource.data().length - 1);     _dataitem['users_role'] = 'administrator'; }); $('#lnkremoverecord').click(function () {     var _dataitem = _datasource.at(_datasource.data().length - 1);     _datasource.remove(_dataitem); }); 

it not raised because updating array , not observableobject. when use:

_dataitem['users_role'] = 'administrator'; 

what update property of javascript object. there not way in javascript intercepting / knowing object has been modified.

try:

_dataitem.set('users_role', 'administrator'); 

instead , kendo ui set checks updating object , trigger events plus other needed actions.

see example modified in here