调用更新后,Kendo数据源重新填充

时间:2013-11-28 09:54:44

标签: c# kendo-ui kendo-grid

使用Kendo数据源绑定到网格。当用户对行进行更改并调用save时,它会调用datasource Update函数,该函数在内部调用webapi来更新服务器。服务器返回相同的记录格式,但其他用户可能会更新相同的dataitem,因此服务器将发送更新的记录并正在调用

数据源成功调用中的

options.success(result)。但是网格和数据源都没有得到更新的数据。不确定是否遗漏了什么。

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);
        }
    });

更新 * 找出问题在

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

在初始加载传输期间,“read”返回“response”,其中包含另一个名为“Users”的对象。然而,当“更新”发生时,它返回实际数据本身,并且没有称为“用户”的对象。所以我把“读”改为 -

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

并从“架构”中删除了“数据”部分。

1 个答案:

答案 0 :(得分:1)

这应该有效。数据源将尝试使用schema.model.id选项将现有数据项与服务器返回的数据项进行匹配。我尝试了以下似乎有效:

$("#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();
});

这是一个现场演示:http://jsbin.com/uNaLilEs/1/edit