Update Kendo UI Datasource

Question

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.

Answer 1

var dataSource = new kendo.data.DataSource({
  //define datasource parameters as per your requirement
});
var grid = jQuery("#grid").kendoGrid({
  dataSource: dataSource,
});

jQuery('#changeevent').change(function()
{
  dataSource.read({
    parametername:jQuery("#valueoffeild").val()
  });

  var grid = jQuery("#grid").data("kendoGrid")
  grid.refresh();
});

Above code pass an extra parameter to your URL.

Answer 2

I am using kendo-ui 2014.3.1119 and this is what I did to get kendo-ui to leverage ngResource Restful API.

dataSource: {
    transport: {
        read: function (options) {
            RestService.query(function (result) {
                options.success(result);
            });
        },
        update: function (options) {
            RestService.update(options.data, function (result) {
                options.success(result);
            });
        },
        create: function (options) {
            RestService.save(options.data, function (result) {
                options.success(result);
            });
        }
    }

Answer 3

In addition to my other answer on DataSource batch mode, I also see that you are initializing 3 dropdown lists to use as editors. The Kendo Grid has a built-in feature for doing this, called ForeignKey Columns. Their demo only shows a synchronous load of the FK data to use in a dropdown editor, but I have an example that loads multiple asynchronously here:

Kendo Music Store Docs

Kendo Music Store Source (GitHub)

Answer 4

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.