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

时间:2013-08-06 10:16:28

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

我希望在更新子网格记录时更新父网格,这可能吗?如果是这样,任何人都可以提供任何建议吗?

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

非常感谢。

1 个答案:

答案 0 :(得分:5)

我最终破解了它。

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

简短版

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