当子网格更新时刷新父Kendo MVC网格

本文关键字：网格 Kendo 刷新 MVC 更新 | 更新日期: 2023-09-27 18:26:32

我想在更新子网格记录时更新父网格，这可能吗？如果是的话，有人能对此提供任何建议吗？

首先，我不确定在子网格上最好使用哪个事件。我希望激发子网格的CRUD操作，然后再次加载父网格的内容，最好是通过Ajax。

下面是我的网格：

@{
    ViewBag.Title = "Bills: Parent/Child";
}
<h2>Bills Index</h2>
@(Html.Kendo().Grid<BillParent>()
    .Name("BillParentsGrid")
    .Columns(columns =>
    {
        columns.Bound(h => h.Category);
        columns.Bound(h => h.Description);
        columns.Bound(h => h.Amount);
        columns.Command(command =>
        {
            command.Edit();
        }).Width(95);
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
        {
            model.Id(h => h.BillId);
            model.Field(h => h.BillId).Editable(false);
        })
        .Events(events => events.Error("error_handler"))
        .Read(read => read.Action("BillParents_Read", "Bill"))
        .Update(update => update.Action("BillParent_Update", "Bill"))
    )
    .Events(events => events.DataBound("dataBound"))
    .ClientDetailTemplateId("BillChildren")
      )
<script id="BillChildren" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<BillChild>()
          .Name("BillChildren_#=BillId#")
          .Columns(columns =>
          {
              columns.Bound(d => d.BillId).Width(50);
              columns.Bound(d => d.Description).Width(150);
              columns.Bound(d => d.Amount).Width(80);
              columns.Command(command =>
              {
                  command.Edit();
                  command.Destroy();
              }).Width(55);
          })
          .DataSource(dataSource => dataSource
              .Ajax()
              .Model(model =>
              {
                  model.Id(d => d.BillId);
                  model.Field(d => d.BillId).Editable(false);
              })
            .Events(events => events.Error("error_handler"))
            .Read(read => read.Action("BillChildren_Read", "Bill", new { id = "#=BillId#" }))
            .Update(update => update.Action("BillChild_Update", "Bill"))
            .Create(create => create.Action("BillChild_Create", "Bill", new { id = "#=BillId#" }))
            .Destroy(destroy => destroy.Action("BillChild_Destroy", "Bill")))
          .ToolBar(tools => tools.Create())
          .ToClientTemplate()
          )
</script>

非常感谢。

当子网格更新时刷新父Kendo MVC网格

我最终破解了它。

事件需要在dataSource上，使用Sync事件，而不是在网格本身上。

短版本

.DataSource(dataSource => dataSource
                  .Ajax()
                  .Model(model =>
                  {
                      model.Id(d => d.BillId);
                      model.Field(d => d.BillId).Editable(false);
                  })
                  .Events(events =>
                  {
                      events.Error("error_handler");
                      events.Sync("resyncParentGrid");
                  })
    <script>
        function resyncParentGrid(e) {
            var parentData = $('#BillParentsGrid').data("kendoGrid");
            parentData.dataSource.read();
        }
    </script>

完整版

@(Html.Kendo().Grid<BillParent>()
    .Name("BillParentsGrid")
    .Columns(columns =>
    {
        columns.Bound(h => h.Category).Width(50);
        columns.Bound(h => h.Description);
        columns.Bound(h => h.Amount).Width(80);
        columns.Command(command =>
        {
            command.Edit();
        })
        .Title("Commands").Width(150);
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
        {
            model.Id(h => h.BillId);
            model.Field(h => h.BillId).Editable(false);
        })
        .Events(events => events.Error("error_handler"))
        .Read(read => read.Action("BillParents_Read", "Bill"))
        .Update(update => update.Action("BillParent_Update", "Bill"))
    )
    .Events(events => events.DataBound("dataBound"))
    .ClientDetailTemplateId("BillChildren")
      )
<script id="BillChildren" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<BillChild>()
          .Name("BillChildren_#=BillId#")
          .Columns(columns =>
          {
              columns.Bound(d => d.BillId).Width(50);
              columns.Bound(d => d.Description).Width(150);
              columns.Bound(d => d.Amount).Width(80);
              columns.Command(command =>
              {
                  command.Edit();
                  command.Destroy();
              })
                  .Title("Commands").Width(150);
          })
          .DataSource(dataSource => dataSource
              .Ajax()
              .Model(model =>
              {
                  model.Id(d => d.BillId);
                  model.Field(d => d.BillId).Editable(false);
              })
              .Events(events =>
              {
                  events.Error("error_handler");
                  **events.Sync("resyncParentGrid");**
              })
              .Read(read => read.Action("BillChildren_Read", "Bill", new { id = "#=BillId#" }))
              .Update(update => update.Action("BillChild_Update", "Bill"))
              .Create(create => create.Action("BillChild_Create", "Bill", new { id = "#=BillId#" }))
              .Destroy(destroy => destroy.Action("BillChild_Destroy", "Bill"))
          )
          .ToolBar(tools => tools.Create())
          .ToClientTemplate()
          )
</script>

<script>
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
    function resyncParentGrid(e) {
        var parentData = $('#BillParentsGrid').data("kendoGrid");
        parentData.dataSource.read();
    }
</script>
相关文章：