After updating the FirstName in the following example, it does not display the changes. However, removing the FirstName field from the dataSource.schema.model shows the updates.
Before Edit
Edit
After Edit
In the Chrome Developer extension for Kendo UI, I noticed that when I remove the firstName property from the model, a new "model" property is added to the record instead:
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 Could Be The Issue?
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>