Кендо-UI сетки встроенного редактирования angularjs

Я хочу иметь встроенное редактирование в моей сетке кендо-интерфейса. Привязка данных, кажется, работает нормально, но когда я нажимаю кнопку Обновить после редактирования чего-либо, область действия обновляется, но диалоги редактирования не исчезают. Если щелкнуть по другой кнопке редактирования, она перейдет в неактуальное состояние. И, в конце концов, он обновляет только область действия, если я предоставляю как минимум фиктивную функцию как k-save. И по какой-то причине нажатие кнопки "Отмена" обновляет область действия. Поэтому кнопка "Отмена" делает то, что я ожидаю от кнопки "Обновить".

Как видите, я хочу обновить локальную область на стороне клиента и ничего не отправлять ни на один сервер.

Может кто-нибудь просветить меня о том, что здесь происходит не так?

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />
</head>
<body>
    <div id="example" ng-app="gridTestApp" ng-controller="TestController">
        <kendo-grid  
            k-data-source="gridData"
            k-columns="gridColumns"
            k-on-change="selected = data"
            k-selectable="true"
            k-editable="editableOptions"
            k-schema="gridSchema"
            k-save="saveFunction">
        </kendo-grid>
        <p ng-show="selected">
            <label>Artist: <input ng-model="selected.artist" /></label>
            <br />
            <label>Track: <input ng-model="selected.track" /></label>
        </p>
        <p>This is for testing data-binding</p>
        <ul>
            <li data-ng-repeat="gridRow in gridData">
                <input ng-model="gridRow.artist"></input><input ng-model="gridRow.track"></input>
                <br>
            </li>
        </ul>
        <p>This is for testing data-binding</p>
        <ul>
            <li data-ng-repeat="gridRow in gridData">
                <span ng-bind="gridRow.artist"></span> -<span ng-bind="gridRow.track"></span>
                <br>
            </li>
        </ul>
    </div>
    <script src="https://code.jquery.com/jquery-1.11.2.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js"></script>
    <script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
    <script>
        angular.module("gridTestApp",[ "kendo.directives" ])
            .controller("TestController", function($scope){
                $scope.gridData = new kendo.data.ObservableArray([
                    { artist: "Pink Floyd", track: "The dark side of the Moon" },
                    { artist: "The Beatles", track: "I've just seen a face" },
                    { artist: "Queen", track: "Innuendo" }
                ]);
                $scope.gridColumns = [
                    { field: "artist", title: "Artist" },
                    { field: "track", title: "Track" },
                    { command: /*"destroy"*/["edit", "destroy"], title: " ", width: "175px", editable: "inline" }
                ];
                $scope.editableOptions = {mode: "inline", update: true, destroy: true};
                $scope.gridSchema = {
                    model: {
                       id: "artist",
                       fields: {
                            artist: { type: "string", validation: { required: true } },
                            track: { type: "string", validation: { required: true } }
                        }
                    }
                }
                $scope.saveFunction = function(){
                    console.log("somehting was modified");
                }
            });
    </script>
</body>
</html>

Я создал PLNKR для вас.

Источник

1 ответ

Решение

Ваша проблема в схеме - это не опция конфигурации сетки, а опция конфигурации источника данных.

Я бы предложил создать реальный DataSource вместо ObservableArray (использование идентификатора строки также может быть не идеальным):

$scope.gridData = new kendo.data.DataSource({
    data: [{
        artist: "Pink Floyd",
        track: "The dark side of the Moon"
    }, {
        artist: "The Beatles",
        track: "I've just seen a face"
    }, {
        artist: "Queen",
        track: "Innuendo"
    }],
    schema: {
        model: {
            id: "artist",
            fields: {
                artist: {
                    type: "string",
                    validation: {
                        required: true
                    }
                },
                track: {
                    type: "string",
                    validation: {
                        required: true
                    }
                }
            }
        }
    }
});

( демо)

Источник
Другие вопросы по тегам