Kendo datasource repopulate after calling update

Question

Am using Kendo datasource for binding to grid. When user makes changes to a row and calls save, it calls datasource Update function which internally calls webapi to update the server. Server returns the same record format but there are chances of same dataitem being updated by other users, so server will send updated record and am calling

options.success(result) in the success call of datasource. But still neither grid nor datasource is getting the updated data. Not sure if am missing something.

this.remoteUsersDataSource = new kendo.data.DataSource({
        transport: {
            read: function (options) {
                var contentType = "application/json; charset=utf-8";
                $.ajax({
                    url: "/api/UserManagementApi",
                    dataType: "json",
                    type: "GET",
                    contentType: contentType,
                    data: { dataSourceRequest: JSON.stringify(options), searchPhrase: that.SearchPhrase },
                    cache: false,
                    success: function (result) {
                        options.success(result);
                    }
                });
            },
            update: function (options) {
                console.log("inside update");
                console.log(options.data);
                var url = that.Globals.updateUserLink;
                var contentType = "application/json; charset=utf-8";
                var dataType = "json";

                that.Query({                        
                    type: "POST",
                    traditional: true,
                    url: url,
                    cache: false,
                    contentType: contentType,
                    dataType: dataType,
                    data:JSON.stringify(options.data)
                }).done(function (result) {
                    console.log("success");
                    console.log(result);
                    options.success(result);
                    that.saveUserCallSuccess(result);
                });

                //that.saveUser(options);
            }
        },
        page: this.Page,
        pageSize: this.PageSize,
        serverPaging: true,
        serverSorting: true,
        serverFiltering: true,
        schema: {                
            data: function (response) {
                console.log("inside data");
                return response.Users;
            },
            model: {
                id: "UserGuid",                    
                pickStatusOption: function (e) {
                    that.MVVM = this;
                    that.pickStatusOption(e);
                },
                unLockUser: function (e) {
                    console.log(e);
                    e.preventDefault();
                    //e.data.IsUserPasswordLocked = false;
                    that.unlockUser(e);
                }
            },
            total: function (response) {
                return response.TotalCount;
            }
        },
        change: function(e) {
            console.log("change");
            console.log(e);
        },
        error: function (e) {
            console.log(e);
        }
    });

UPDATE * Figured out the problem was in

  schema: {                
        data: function (response) {
            console.log("inside data");
            return response.Users;
        },

during the initial load transport "read" returns "response" which has another object called "Users". Whereas when "update" happens, it returns the actual data itself and there is no object called "Users". So I changed my "read" to -

success: function (result) {
                    options.success(result.Users);
                }

and removed the "data" section from "schema".

Atanas Korchev Atanas Korchev · Accepted Answer · 2013-11-28T12:24:16

This should have worked. The data source will try to match existing data items with the ones returned by the server using the schema.model.id option. I tried the following which seems to work:

$("#grid").kendoGrid({
  dataSource: {
    schema: { model: { id: "id" } },
    transport: {
      read: function(options) {
        setTimeout(function() {
          var data = { id: 1, foo: "foo" };

          options.success([ data ]);

        }, 100);
      },
      update: function(options) {
         setTimeout(function() {
          // simulate changes by other users
          var data = { id: 1, foo: "bar" };

          options.success([ data ]);

        }, 100);
      }
    }
  }
});

$("button").click(function() {
  var grid = $("#grid").data("kendoGrid");
  var item = grid.dataSource.get(1);
  item.dirty = true;
  grid.dataSource.sync();
});

Here is a live demo: http://jsbin.com/uNaLilEs/1/edit

Kendo datasource repopulate after calling update

1 Answers