【问题标题】:How can I refresh the grid after I edit the Kendo UI grid?编辑 Kendo UI 网格后如何刷新网格?
【发布时间】:2014-03-18 18:39:58
【问题描述】:

我使用editable: "popup" as shown on Telerik's demo page. 编辑网格编辑网格后,我希望刷新网格。在我编辑网格后,网格是否有任何事件被调用?

我尝试使用数据绑定事件。在这种情况下,我读取了数据源,但它告诉我刷新网格是一个无限循环。我尝试使用 saveChanges 事件,但它不起作用。

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
.Name("grid")
.Columns(columns =>
{
    columns.Bound(p => p.ProductName);
    columns.Bound(p => p.UnitPrice).Width(100);
    columns.Bound(p => p.UnitsInStock).Width(100);
    columns.Bound(p => p.Discontinued).Width(100);
    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.Pageable()
.Sortable()
.Scrollable()
  .Events(events => events.Change("saveChanges "))
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(20)
    .Events(events => events.Error("error_handler"))
    .Model(model => model.Id(p => p.ProductID))
    .Create(update => update.Action("EditingPopup_Create", "Grid"))
    .Read(read => read.Action("EditingPopup_Read", "Grid"))
    .Update(update => update.Action("EditingPopup_Update", "Grid"))
    .Destroy(update => update.Action("EditingPopup_Destroy", "Grid"))
))

【问题讨论】:

    标签: kendo-ui kendo-grid kendo-asp.net-mvc


    【解决方案1】:

    您可以订阅网格数据源的同步事件,并调用其数据源的读取方法。

    .Events(events => events.Error("error_handler").Sync("sync_handler"))
    
    function sync_handler(e) {
       this.read();
    }
    

    【讨论】:

    • 你能告诉我.Sync("sync_handler")事件是什么以及何时使用它吗?
    • 这可以解决我的问题,但看不到触发同步处理程序?
    • dataSource.read() 不会刷新网格,它只是调用 read 函数,它(如果您遵循 Telerik 的教程和样式)只会将网格重置为其初始条件,清除所有您对数据源所做的更改。
    【解决方案2】:

    将事件添加到数据源

    .DataSource(dataSource => dataSource.Ajax(
    
            .Events(e => e.RequestEnd("PowerPlantProduction.onRequestEnd"))**
    )
    

    Javascript:

    onRequestEnd: function (e) {
    
            if (e.type == "update") {
                if (!e.response.Errors) {
                   e.sender.read();
                }
            }
        },
    

    【讨论】:

    • 试过这个。没用。它适用于一个奇怪的不同项目。对于另一个项目,我使用 .Sync() 处理程序并且有效。无论如何都支持你。
    【解决方案3】:

    如果您使用服务器端验证,接受的答案可能会导致意外行为。无论请求是否成功,只要向服务器发送更新都会触发同步事件,因此如果请求触发服务器端验证错误(或任何其他错误),网格仍将更新并且任何更改都会丢失。仍在查看 this 但我发现的最佳解决方案是使用数据源的 onRequestEnd() 事件并手动检查错误。

    例如:

    function onRequestEnd(e)
    {
        var grid = $("#grid").data("kendoGrid");
        var data = grid.dataSource;
        if (e.type == "create" || e.type == "update") {
            if (!e.response.Errors) 
                data.read();
            else console.log("I had some issues");
        }
    }
    

    【讨论】:

    • 使用 Kendo MVC 2015.2.624.545,事件对象 e 没有名为“type”的属性。
    【解决方案4】:

    这将刷新网格

     var grid = $("#Name").data("kendoGrid");
         grid.dataSource.page(1);
    

    如果 .page(1) 不起作用,请尝试 .read,但应该这样做

    【讨论】:

    • 如果您使用工具栏中的自定义按钮添加预填充行并启用分页,这实际上是一个很好的答案。谢谢!
    【解决方案5】:

    我同意这是一个非常古老的问题,但不幸的是几天前我也是这个错误的受害者。我的场景是

    1. 我第一次能够使用弹出方法在数据库中插入新记录
    2. 如果我在同一个网格中添加另一条记录而不刷新,网格会将两条记录都发送到服务器,不幸的是会导致重复值错误。

    最后我想我找到了解决问题的方法,当我将记录插入数据库并返回该对象时,我没有为记录设置主键值。

    以下是我的剑道网格代码

    @(Html.Kendo().Grid<TeamMemberViewModel>()
            .Name("Grid")
            .Columns(columns =>
            {
                columns.Bound(p => p.abcd);
                columns.Bound(p => p.abcd_id).Hidden();
                columns.Bound(p => p.abcd12_id).Hidden();
                columns.Command(command =>
                {
                    command.Edit();
                    command.Destroy();
                });
            })
            .ToolBar(toolbar =>
            {
                if (ViewBag.IsAddAllowed)
                {
                    toolbar.Create().Text("Add new");
                }
    
                //  toolbar.Save().SaveText("Save Changes");
    
            })
            .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ABCD")
            )
            .Pageable()
            .Navigatable()
            .Sortable()
            .Scrollable()
            .DataSource(dataSource => dataSource
                .Ajax()                
                .PageSize(20)
                .ServerOperation(false)
                .Events(events =>
                {
                    events.Error("error_handler");
                    events.RequestEnd("request_end");
                }
    )
            .Model(model =>
            {
                model.Id(p => p.primarykey_id);
                model.Field(p => p.abcd);
            })
            .Create("ABCD_Create", "TeamMember", new { id = Model.abcd_id})
            .Read("ABCD_Read", "TeamMember", new { id = Model.abcd_id })
            .Update("ABCD_Update", "TeamMember", new { id = Model.abcd_id })
            .Destroy("TeamMember_Destroy", "TeamMember", new { id = Model.hackathon_id })
        )
    )
    

    下面是错误处理代码

      function error_handler(e) {
            if (e.errors) {
                var message = "Errors:\n";
                $.each(e.errors, function (key, value) {
                    if ('errors' in value) {
                        $.each(value.errors, function () {
                            message += this + "\n";
                        });
                    }
                });
                $(".errorMessage").text(message);
                alert(message);
            }
        }
    
    
    
        function request_end(e) {
            switch (e.type) {
                case "create":
                    if (e.Errors == undefined && e.response.Total > 0) {
                        //  alert("Saved Successfully");
                        $(".errorMessage").text("Saved Successfully");
                    }
                    break;
    
                case "update":
                    if (e.Errors == undefined && e.response.Total > 0) {
                        // alert("Updated Successfully");
                        $(".errorMessage").text("Updated Successfully");
                    }
                    break;
    
                case "destroy":
                    if (e.Errors == undefined && e.response.Total > 0) {
                        // alert("Deleted Successfully");
                        $(".errorMessage").text("Deleted Successfully");
                    }
                    break;
    
                default:
                    $(".errorMessage").text("");
                    break;
            }
    
            return true;
        }
    

    服务器代码

     [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult ABCD_Create([DataSourceRequest] DataSourceRequest request, MyViewModel my, short abcd_id)
    {
        if (my != null && ModelState.IsValid)
        {
    
            MY tm = Mapper.Map<MyViewModel>(my);
            tm.abcd_id = abcd_id;
    
            try
            {
                repo.Create(tm);
                my.primarykey_id = tm.primarykey_id;   ///This is most important                           
            }
            catch (Exception ex)
            {
                ModelState.AddModelError("Duplicate Value Found", string.Format("error: {0} already exists", my.abcd));
            }
        }
        else
        {
            ModelState.AddModelError("Error", "Not valid please send data again");
        }
    
        return Json(new[] { my }.ToDataSourceResult(request, ModelState));
    }
    

    希望这可能对某人有所帮助

    【讨论】:

      【解决方案6】:

      如果您想刷新网格,请使用此选项。

      $("#WorkOrderDetails").data("kendoGrid").refresh();
      

      【讨论】:

      • 其实应该是$("#WorkOrderDetails").data("kendoGrid").dataSource.read();
      【解决方案7】:

      在具有弹出编辑模式的 ajax mvc 剑道网格中使用 AutoSync(true) 会导致弹出窗口根本不显示。

      所以我用这个

      function onRequestEnd(e) {
              if(e.type == "create" || e.type == "destroy" || e.type == "update") {
                  setTimeout(function myfunction() {
                      $("#mygrid").data("kendoGrid").dataSource.read();
                  }, 1000);
              }
          }
      

      超时是为了确保您不会过度执行 crud 操作。

      【讨论】:

      • 这看起来很可怕,但是在尝试了所有其他解决方案之后,它似乎是唯一对我有用的解决方案。似乎没有办法使用 KendoMVC 来触发在数据源操作完成并且 DOM 已使用来自 CRUD 操作的服务器响应更新后触发的事件。
      【解决方案8】:

      以防其他人需要知道如何执行此操作。您可以在创建和更新位中包含“完整”功能。

      transport: {
          read: {
              url: "http://myurl.json"
          },
          create: {
              url: "http://mycreate.json",
              type: "POST",
              complete: function(e) {
                  $("#grid").data("kendoGrid").dataSource.read(); 
              }
          },
      

      【讨论】:

        【解决方案9】:

        您可以在单击编辑按钮时调用一个函数,并在其中刷新网格:

        function EditRow(){
             var grid = $("#YourGridName").data("kendoGrid");
             grid.dataSource.read();              
        }
        

        【讨论】:

        • 恐怕不好。因为编辑行后必须刷新网格,说明数据库中的数据已经改变了。
        • 以上代码仅用于在保存数据后刷新网格。
        • 我怎么知道我已经保存了我的数据?我在 saveShanges 事件中使用grid.dataSource.read(),但似乎是先刷新网格然后再保存数据。
        • 我发现添加preventDefault方法后,有时先保存数据是可以的,但有时是先刷新网格。function onSaveChanges(e) { if (e.model.dirty) { e.preventDefault(); var grid = $("#MyGrid").data("kendoGrid"); grid.saveChanges(); grid.dataSource.read(); } }
        【解决方案10】:
        .sync: function (e) {
        this.read();
        },
        

        【讨论】:

        • 这可能是正确的答案,但它没有解释原因。你应该通过解释来改进你的答案。
        【解决方案11】:

        我一直试图弄清楚如何在创建新项目后刷新网格。场景是:在客户端创建一个项目,向服务器发送请求,接收响应并更新客户端。 (或者,我不介意弄清楚为什么网格没有使用我在服务器端创建函数中返回的项目)

        This post 提到了requestEnd 事件,但它没有暴露在剃刀中。这个事件似乎是在请求完成后触发的,也就是服务器处理完事件之后,所以在客户端创建的新对象已经被发送到服务器处理;然后客户端可以在不丢失数据的情况下请求最新信息。由于在页面加载时未定义网格数据源对象,我最终使用.Change 事件来挂钩requestEnd 事件。

        @(Html.Kendo().Grid
        .Name("user-grid")
        ...
        .Pageable(pageable => pageable
            ...
            .Events( e => e.Remove("grid_remove").Change("hook_request_end"))
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Model(m =>
            {
                m.Id(vm => vm.DocumentId);
                m.Field<DateTime>("LastModified").Editable(false);
            })
            .Read(a => a.Action("KList", "Controller"))
            .Create(a => a.Action("KCreate", "Controller"))
            .Update(a => a.Action("KUpdate", "Controller"))
        )
        

        然后是javascript:

        var requestEndHooked = false;
        function hook_request_end()
        {
            if (requestEndHooked == true)
            {
                return;
            }
        
            requestEndHooked = true;
            $("#user-grid").data("kendoGrid").dataSource.bind("requestEnd", dataSource_requestEnd);
        }
        
        function dataSource_requestEnd(e)
        {
            try
            {
                if (e.type == "create")
                {
                    $("#user-grid").data("kendoGrid").dataSource.read();
                }
        
            }
            catch (e)
            {
            }
        }
        

        如果有更好的方法,我很想知道。

        回答你的问题,除了“create”之外还有事件:“read”、“update”

        【讨论】:

          【解决方案12】:

          我知道这是一个老问题,但 Telerik 论坛上有一个完美的示例(至少对我而言!):https://www.telerik.com/forums/refresh-grid-after-insert-update

          我在此处发布此内容是因为该论坛问题和答案还不到一年,可能是在 OP 提出问题时该解决方案不适用于剑道版本。

          这里提到的解决方案是在网格上附加一个 dataBound 处理函数,该函数在保存事件后只执行一次。在代码中:

          function onGridEdit(e) {
              e.sender.one("dataBound", function (e) {
                  e.sender.dataSource.read();
              });
          }
           
          function bindDataAndRefresh(e) {
              var grid = $("#upcoming-grid").data("kendoGrid");
              grid.bind("dataBound", onGridEdit(e));
          }
           
          
          $(document).ready(function () {
              var grid = $("#upcoming-grid").data("kendoGrid");
              grid.bind("save", bindDataAndRefresh);
          });
          

          【讨论】:

          【解决方案13】:

          在为剑道创建datasource 时,我使用了transport:update 部分的complete 属性。

          我的代码

           dsource = new kendo.data.DataSource({
                      transport: {
                          read: {
                              url: serverapiUrl + "/emp",
                              type: 'GET',
                              dataType: "json",
                              cache: true,
                              beforeSend: function (xhr, settings) {
                                  xhr.setRequestHeader('api-key', 'auth key');
                              }
                          },
                          create: {
                              url: serverapiUrl + "/emp",
                              type: 'POST',
                              dataType: 'json',
                              beforeSend: function (xhr, settings) {
                                  console.log('under create');
                                  xhr.setRequestHeader('api-key', 'authkey');
                                  xhr.setRequestHeader("content-type", "application/json"); 
                                  console.log('settings', settings);
                                  console.log(xhr);
                              }
                          },
                          update: {
                              url: serverapiUrl + "/emp",
                              type: 'PUT',
                              dataType: 'json',                        
                              beforeSend: function (xhr, settings) {
                                  console.log('under update');
                                  xhr.setRequestHeader('api-key', 'authkey');
                                  xhr.setRequestHeader("content-type", "application/json");                                                        
                                  console.log('settings', settings);
                                  console.log(xhr);
                              },
                              complete: function (eve) {
                                  console.log('update complete');
                                  $("#griddiv").data("kendoGrid").dataSource.read();
                              }
                          }
          

          rest 遵循 kendo ui 数据源创建文档的正常结构。

          【讨论】:

            猜你喜欢
            • 2013-05-04
            • 1970-01-01
            • 2014-03-07
            • 2015-03-28
            • 1970-01-01
            • 2023-04-10
            • 2017-06-10
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多