[FIXED] Update Kendo UI Datasource

Issue

I'm currently working on a project in which I am using Spring MVC in conjunction with the Kendo UI jQuery library (the latest version). The problem that I am having is updating the datasource of the kendo grid inline locally(kendo datasource) as well as remotely. I used the synch and set methods of the datasource object but neither of these worked.

My jQuery code:

/*global $:false */

$(document).ready(function () {
    "use strict";
    var request;
   
    $("#tabstrip").kendoTabStrip();

    

    var applicationDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "/appinfo/findApplications",
                dataType: "json"
            },
            create: {
                url: "/appinfo/submit",
                dataType: "json",
                type: "POST"
            },
            update: {
                url: "/appinfo/updateApplication",
                dataType: "json",
                type: "POST"
            },
            destroy: {
                url: "/appinfo/deleteApplication",
                dataType: "json"
            },
            schema: {
                model: {
                    id: "applicationId",
                    fields: {
                        applicationId: {type: "number"},
                        applicationName: {type: "string"},
                        url: {type: "string"},
                        serverName: {type: "string"},
                        environmentName: {type: "string"},
                        ipAddress: {type: "string"},
                        genericUserName: {type: "string"},
                        genericPassword: {type: "string"}
                    }
                }
            },
            parameterMap: function (options, operation) {
                if (operation !== "read" && options.models) {
                    return {models: kendo.stringify(options.models)};
                }

                if (operation == "destroy" && options.models) {
                    console.log("Delete worked");
                    return { models: kendo.stringify(data.models) };
                }
            }
        },
        batch: true,
        pageSize: 10
    });




    var applicationGrid = $("#applicationsGrid").kendoGrid({
        dataSource: applicationDataSource,
        pageable: true,
        height: 600,
        scrollable: true,
        sortable: true,
        filterable: true,
        toolbar: [
            {name: "create", text: "Add New Application"}
        ],
        columnMenu: true,
        editable: {
            update: true,
            destroy: true,
            create: true,
            mode: "inline",
            confirmation: "Are you sure you want to delete this record?"
        },
        columns: [
            {field: "applicationName", title: "Application Name"},
            {field: "url", title: "URL"},
            {field: "serverName", title: "Server", editor: serverDropDownEditor, width: "300px"},
            {field: "environmentName", title: "Environment", editor: environmentDropDownEditor, width: "300px"},
            {field: "ipAddress", title: "Database", editor: databaseIpAddressDropDownEditor, width: "300px"},
            {field: "genericUserName", title: "Default Username"},
            {field: "genericPassword", title: "Default Password"},
            {title: "Modify", command: ["edit" , "destroy"]}
        ],
        edit: function (e) {           
            var dataItem = applicationDataSource.at(e.currentTarget);
            console.log("DataSource Count: " + applicationDataSource.total());
        },
        save: function (e) {
            var dataItem = applicationDataSource.at(e.currentTarget);          
            console.log("DataSource Count: " + applicationDataSource.total());
            console.log("The  model on save: " + e.model.applicationName);
            applicationDataSource.sync();
        },
        create: function (e) {
            console.log("Create this: " + e.values);
            applicationDataSource.insert(e.model);
            applicationDataSource.sync();
        },
        delete: function (e) {
            console.log("Delete this: " + e.model);
            applicationDataSource.remove(e.model);
        }
    });


    function serverDropDownEditor(container, options) {
        $('<input required data-text-field="serverName" data-value-field="serverId" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: false,
                optionLabel: " - Select - ",
                dataTextField: "serverName",
                dataValueField: "serverId",
                dataSource: {
                    transport: {
                        read: {
                            url: "/appinfo/findServers",
                            dataType: "json"
                        }
                    }
                }
            });
    }

    function environmentDropDownEditor(container, options) {
        $('<input required data-text-field="environmentName" data-value-field="environmentId" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: false,
                optionLabel: " - Select - ",
                dataTextField: "environmentName",
                dataValueField: "environmentId",
                dataSource: {
                    transport: {
                        read: {
                            url: "/appinfo/findEnvironments",
                            dataType: "json"
                        }
                    }
                }
            });
    }

    function databaseIpAddressDropDownEditor(container, options) {
        $('<input required data-text-field="ipAddress" data-value-field="databaseInfoId" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: false,
                optionLabel: " - Select - ",
                dataTextField: "ipAddress",
                dataValueField: "databaseInfoId",
                dataSource: {
                    transport: {
                        read: {
                            url: "/appinfo/findDatabases",
                            dataType: "json"
                        }
                    }
                }
            });
    }
});

BTW.... I am using the latest version of Kendo-UI Web.

Solution

You don't really say what your actual problem is, but my guess is that it isn't making any network requests to the server. I think this is because you have batch mode enabled on the DataSource, so it isn't going to automatically send changes to the server unless either the Grid tells it to, or you manually call .sync()

I see you are trying to call .sync() in the save and create event handlers, but you don't need to do that. The grid will sync the datasource when the Save button is clicked. However, you don't have a Save button. Normally you would add one to the Grid's toolbar:

toolbar: ["create", "save", "cancel"],

Then you will get all 3 buttons on the grid toolbar. You would make your edits to all your data rows, then click "Save", and the grid will call .sync() on your DataSource for you. This will also trigger the save event callback, but it doesn't look like your callback is doing anything but logging the data to the console. You don't need to call .sync() in the event callbacks.

The Grid : Batch Editing demo is set up like this as an example.

---

If you are expecting data to be sent to the server the moment that you edit, delete, or create a row, then you should set batch to false instead. Then the DataSource won't wait for more (a batch) of changes, and will immediately send the data.

Answered By - CodingWithSpike