angularjskendo-uikendo-gridangular-kendo

kendo-ui grid inline edit angularjs


I want to have inline editing in my kendo-ui grid. Databinding seems to work fine but when I click the Update button after editing something the scope gets updated but the edit dialogs do not disappear. If a click on another edit button it gets into a defunct state. And after all it only does update the scope if I provide at least a dummy function as k-save. And for some reason clicking the Cancel button does update the scope. So the Cancel button does what I would expect from the Update button.

As you may see I want to update the local scope on client side and not send anything to any server.

Can somebody enlighten me about what is going wrong here?

<!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>

I have created a plnkr for you.


Solution

  • Your problem is the schema - this is not a grid configuration option but a DataSource configuration option.

    I'd suggest creating an actual DataSource instead of an ObservableArray (using a string id might not be ideal either):

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

    (demo)