3

kendo-ui グリッドでインライン編集を行いたいです。データバインディングは正常に機能しているようですが、何かを編集した後に [更新] ボタンをクリックすると、スコープは更新されますが、編集ダイアログは消えません。別の編集ボタンをクリックすると、無効な状態になります。そして結局のところ、少なくともダミー関数を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を作成しました。

4

1 に答える 1

8

問題はスキーマです。これはグリッド構成オプションではなく、DataSource 構成オプションです。

ObservableArray の代わりに実際の DataSource を作成することをお勧めします (文字列 ID の使用も理想的ではない可能性があります)。

$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
                    }
                }
            }
        }
    }
});

(デモ)

于 2015-03-10T18:45:20.510 に答える