Kendo UI grid does not show edited value, when using angular-kendo.js and the field is defined in the schema / model

StackOverflow https://stackoverflow.com/questions/23567982

  •  19-07-2023
  •  | 
  •  

Вопрос

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 enter image description here

Edit

enter image description here

After edit

enter image description here

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.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top