更新子网格时刷新父 Kendo MVC 网格答案

【问题标题】：Refreshing parent Kendo MVC Grid when Child grid updated更新子网格时刷新父 Kendo MVC 网格
【发布时间】：2013-08-06 10:16:27
【问题描述】：

我想在子网格记录更新时更新父网格，可以吗？如果是这样，任何人都可以提供任何建议吗？

首先，我不确定哪个事件最适合在子网格上使用。我希望子网格的 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>

非常感谢。

【问题讨论】：

标签： c# asp.net-mvc-3 asp.net-mvc-4 kendo-ui kendo-grid

【解决方案1】：

我终于破解了。

事件需要在数据源上，使用同步事件，而不是在网格本身上。

短版

.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>

【讨论】：