CODEWITHSUNDEEP
kendo-uidatasource
user2109254
user2109254

Reputation: 1759

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

I have put together a jsFiddle that demonstrates the change event not being fired when a data item is modified.

Go to the fiddle and you will see a Grid and some links under the grid. Click on each one of the links in order, and you will see that the Modify operation does happen, but the change event is not raised. You can see that the modification did happen, when you click on the refresh grid link. However for the Add/Remove operations refreshing the grid is not needed, and also the change event is raised.

How can I get the change event to be raised when a DataItem is modified?

Regards,

Scott

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

For some reason StackOverflow is saying that: "Links to jsfiddle.net must be accompanied by code"

Markup:

<div id="KendoGrid"></div>

<p>&nbsp;</p>
<ul>
    <li><a id="lnkWireUpDataSource" class="link">Wire Up 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);
});

Upvotes: 0

Views: 5280

Answers (1)

OnaBai
OnaBai

Reputation: 40887

It is not raised because you are updating an array and not an ObservableObject. When you use: 

_dataItem['Users_Role'] = 'Administrator';

What you do is update the property of a JavaScript object. There is not way in JavaScript for intercepting / knowing that the object has been modified.

Try:

_dataItem.set('Users_Role', 'Administrator');

instead and then Kendo UI set checks that you are updating the object and trigger events plus all other needed actions.

See you example modified in here

Upvotes: 2

Related Questions