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.

Lars Höppner · Accepted Answer · 2015-03-10 18:45:20Z

8

+50

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, 2015 at 18:45

Lars Höppner

18.4k2 gold badges47 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Sjoerd222888 Over a year ago

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

Lars Höppner Over a year ago

one option would be to keep the dynamic data separate and update the DS when it gets updated via $scope.gridData.data($scope.dynamicData): 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)

P2l Over a year ago

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 plnkr.co/edit/9k1o53vblxAqV3yGcHkB?p=preview

Sjoerd222888 Over a year ago

@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)"?

Lars Höppner Over a year ago

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: plnkr.co/edit/StzveDlS6qo5UarGtyQZ?p=preview

|

Collectives™ on Stack Overflow

kendo-ui grid inline edit angularjs

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related