I found the problem: You should not use the datasource batch option, when working with local data.
As confirmed by Mihai Bazon.
After changing the batch option to false everything worked well again.
Вопрос
In the following example the edited FirstName, will not be shown after it's updated. But when I remove the FirstName field from the dataSource.schema.model the changes are shown.
Before edit
Edit
After edit
In the Google Chrome Developer extension for Kendo UI, I can see the firstName is removed from the model and a property "model" is added to the record instead of the firstName property:
data: Array[7]
0: Object{3}
Id: 1
LastName: "ln_1"
models: Array[1]
0: Object{3}
Id: 1
FirstName: "fn_1_changed_to_something_else"
LastName: "ln_1"
1: Object{3}
Id: 2
FirstName: "fn_2"
LastName: "ln_2"
....
What am I doing wrong?
Example html page
<!doctype html>
<html ng-app="demoApp">
<head>
<meta charset="utf-8">
<title>Kendo UI directives for AngularJS</title>
<link href="//cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="//cdn.kendostatic.com/2014.1.318/styles/kendo.silver.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-sanitize.js"></script>
<script src="/Scripts/angular-kendo.js"></script>
<script>
var demoApp = angular.module("demoApp", ["kendo.directives"]);
demoApp.controller('demoCtrl', function($scope) {
$scope.employees = [
{ Id: 1, FirstName: "fn_1", LastName: "ln_1" },
{ Id: 2, FirstName: "fn_2", LastName: "ln_2" },
{ Id: 3, FirstName: "fn_3", LastName: "ln_3" },
{ Id: 4, FirstName: "fn_4", LastName: "ln_4" },
{ Id: 5, FirstName: "fn_5", LastName: "ln_5" },
{ Id: 6, FirstName: "fn_6", LastName: "ln_6" },
{ Id: 7, FirstName: "fn_7", LastName: "ln_7" }
];
$scope.mainGridOptions = {
dataSource: {
data: $scope.employees,
batch: true,
pageSize: 5,
schema: {
model: {
id: "Id",
fields: {
FirstName: { type: "string", validation: { required: true } }
//LastName: { editable: true }
}
}
}
},
editable: "popup",
sortable: true,
pageable: true,
columns: [{
field: "FirstName",
title: "First Name",
width: "120px"
}, {
field: "LastName",
title: "Last Name",
width: "120px"
},
{
command: [{
name: "edit",
text: { edit: "Custom edit", cancel: "Custom cancel", update: "Custom update" }
}
, { name: "destroy", text: "Remove" }
]
}]
};
});
</script>
</head>
<body ng-controller="demoCtrl">
<div>
<div kendo-grid k-options="mainGridOptions"></div>
</div>
</body>
</html>
Решение
I found the problem: You should not use the datasource batch option, when working with local data.
As confirmed by Mihai Bazon.
After changing the batch option to false everything worked well again.