kendo-ui grid inline edit angularjs

Question

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.

score 8 · Accepted Answer · answered Mar 10 '15 at 18:45

8

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)

answered Mar 10 '15 at 18:45

Lars Höppner

18,252
2
45
73

1

Thanks! The problem I have is that the data for the grid is a scope object that should get updated. What I can do is something like `$scope.gridData = new kendo.data.DataSource({ data: $scope.myData; ...` but then the scope object containting the data will not get updated. And I cannot do something like `$scope.myOtherGridDataObject = $scope.gridData.data();` for some reason... – Sjoerd222888 Mar 11 '15 at 13:27
2

one option would be to keep the dynamic data separate and update the DS when it gets updated via $scope.gridData.data($scope.dynamicData): http://plnkr.co/edit/AkKBtTVWRrhvJyF8Kmfd?p=preview (or you modify the DS through the API and query the DS when you need the data in other places) – Lars Höppner Mar 11 '15 at 17:52
1

This sorted it for me, the change being to add the schema to the Kendo datasouce with a model and id. I had initially looked at trying to add something to the save function, but that turned out to unnecessary, you don't need that function at all to make the data update. Here's a (different) simplified example that contains the minimum to make it work http://plnkr.co/edit/9k1o53vblxAqV3yGcHkB?p=preview – P2l Mar 12 '15 at 09:18
@Lars Höppner: I just realized that in your example `$scope.dynamicData ` does not get updated when you change the grid. Can you explain what you meant with "update the DS when it gets updated via $scope.gridData.data($scope.dynamicData)"? – Sjoerd222888 Mar 16 '15 at 09:15
1

eh, that was a clumsy way of putting it; if you want to work with a regular array, you have to manually keep it in sync with the DS; however from your original example, it looks like working with an ObservableArray would be an option for you, so you can simply pass that to the DS and it will stay in sync: http://plnkr.co/edit/StzveDlS6qo5UarGtyQZ?p=preview – Lars Höppner Mar 16 '15 at 12:18
Awesome answer, thank you so much for providing a demo! – Brady Liles Jul 14 '15 at 19:33

kendo-ui grid inline edit angularjs

1 Answers1