Updating base object in Kendo grid bound to local data

Question

I have a local javascript list that I have bound to a Kendo grid (inline editing) using a DataSource. When I use the grid to add a row, visually it all works but I can't figure out how to update the base javascript list. I need this functionality as the list is actually part of a larger Javascript object that is updated in multiple places. Once all the changes are complete, the entire object is sent to the server with ajax.

Here's some simple code that demonstrates the issue (can find it on JSBin as well). Just add an item and click Get Array Size to see that the array hasn't increased in size.

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title>JS Bin</title>
    <link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="MyGrid"></div>
    <a id="LengthButton">Get Array Size</a>

    <script>
        $("#LengthButton").kendoButton({
            click: function (e) {
                alert(dataList.length);
            }
        });

        var dataList = [
            { id: 1, Comment: "Comment 1" },
            { id: 2, Comment: "Comment 2" },
            { id: 3, Comment: "Comment 3" }
        ];

        var dataSource = new kendo.data.DataSource({
            transport: {
                read: function (options) {
                    options.success(dataList);
                },
                create: function (options) {
                    var data = options.data;
                    data.id = dataSource.data()[dataSource.data().length - 1].id + 1;

                    options.success([data]);
                }
            },
            data: dataList,
            schema: {
                model: {
                    id: "id",
                    fields: {
                        id: { type: "number", editable: false, nullable: true },
                        Comment: { type: "string" }
                    }
                }
            }
        });

        $("#MyGrid").kendoGrid({
            toolbar: ["create"],
            columns: [
              { command: "edit" },
              {
                  title: "Comment",
                  field: "Comment"
              }
            ],
            editable: { mode: "inline" },
            dataSource: dataSource
        });
    </script>
</body>
</html>

I've been back and forth with Telerik but still haven't sorted it out so I'm hoping someone here can point me in the right direction.

Thanks in advance, Jason

OnaBai OnaBai · Accepted Answer · 2014-01-20T19:32:57

The fact that you create a DataSource from dataList does not mean that when you update the dataSource then dataList is updated, this is just the initial content of the DataSource. You should probably work with dataSource or copy the content of dataSource into dataList after creating or updating a record.

You can change your button handler to:

$("#LengthButton").kendoButton({
    click: function (e) {
        alert(dataSource.data().length);
    }
});

If you want to copy back the content of the DataSource to dataList then you can do:

transport: {
    read: function(options) {
        options.success(dataList);
    },
    create: function(options) {
        var data = options.data;
        data.id = -dataSource.data()[dataSource.data().length - 1].id + 1;    
        options.success([data]);
        // Copy data back to dataList
        dataList = dataSource.data().slice();
    },
    update: function (options) {
        var data = options.data;
        options.success([data]);
        // Copy data back to dataList
        dataList = dataSource.data().slice();
    }

Updating base object in Kendo grid bound to local data

1 Answers