Kendo grid saving with row change

by Fareez Ahmed

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="ttp://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.silver.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css">
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div data-ng-app="app">
    <div data-ng-controller="Grid as vm">
        <div kendo-grid='grid' k-options="vm.options"></div>
        <div>{{vm.msg}}</div>
    </div>
</div>

JavaScript

angular.module("app", ["kendo.directives"])
    .controller("Grid", Grid)
    .directive('pckendo', PCKendo);

// Grid controller constructor
function Grid() {
    var vm = this;

    vm.gridData = getDataSource();

    // NOTE!
    // Directive will call back to this when we detect a row change. We want to save out the edited row
    vm.rowChangedCallback = function () {
        console.log("calling vm.gridData.sync");
        
        // Calling this exits edit mode and we go bacl to cell 0, 0
        vm.gridData.sync();
    }

    vm.options = {
        navigatable: true,
        sortable: true,
        editable: true,
        toolbar: [{
            name: "mycreate",
            text: "Add new"
        },
            "save", "cancel"],

        columns: getColumns(),
        dataSource: vm.gridData,

    };

    $(document).on("click", ".k-grid-mycreate", function () {
        console.log("addRow called");
        vm.gridData.add(new RowData("", "", "", "", ""))

        console.log(vm.gridData);
    });

}

function getDataSource() {
    var gridData = [
    new RowData('1 jan 2015', 'C1', 'Car 1 - Red GMH sedan', 'TR1', 'Trailer 1'),
    new RowData('2 jan 2015', 'C2', 'Car 2 - Blue Toyota', 'TR1', 'Trailer 1'),
    new RowData('2 jan 2015', 'C2', 'Car 3 - Blue Toyota', 'TR2', 'Trailer 2'), ];

    var dataSrc = new kendo.data.DataSource({
        transport: {
            read: function (e) {
                e.success(gridData);
            },

            update: function (e) {
                console.log("update is called: ", e);
                var updateItem = e.data;
                console.log("updated object : ", updateItem);

                e.success();
            },

            create: function (e) {
                console.log("create is called:", e);
                console.log("create data is:", e.data);

                e.success(e.data);
            },
            destroy: function (e) {
                e.success();
            }
       ...