javascript - 如何在 asp.net mvc 内联编辑/创建 [kendo ui] 后刷新网格的所有行

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

我有嵌套网格。内部网格允许内联编辑。在特殊情况下,在内网格中创建新元素(表中的行)后,应更改内网格的其他行。我更改数据库中的该行,但我不知道如何刷新内部网格。如果用户按下网格的“刷新按钮”,将显示数据。添加/编辑元素后如何使内部网格刷新?


外网格

@(Html.Kendo().Grid<Portal2.Areas.ResourceGrouping.Models.TruckTrailerDriverViewModel>()
  .Name("TruckGrid")
  .DataSource(dataSource => dataSource
      .Ajax()
      .Events(events => events.Error("error_handler"))
      .Model(model => model.Id(m => m.Id))
        .Read(read => read.Action("JsonTruckTrailerDriverRead", "TrucksGrouping"))
   )
  .Columns(columns =>
  {
      columns.Bound(x => x.TruckRegNum);
      columns.Bound(x => x.TrailerStartDate);
      columns.Bound(x => x.TrailerEndDate);
      columns.Bound(x => x.TrailerRegNum);
      columns.Bound(x => x.DriverStartDate);
      columns.Bound(x => x.DriverEndDate);
      columns.Bound(x => x.DriverName);
  })
  .Pageable(p => p
      .Refresh(true)
      .PageSizes(true)
      .ButtonCount(5)
      .PageSizes(new[] { 20, 30, 40, 50, 100 }))
  .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
  .Reorderable(reorder => reorder.Columns(true))
  .Events(events => events
      .DetailExpand("detailExpand")
      )
  .ClientDetailTemplateId("template")
)

模板

<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().TabStrip()
      .Name("tabStrip_#=Id#")
      .SelectedIndex(0)
      .Animation(animation => animation.Open(open => open.Expand(ExpandDirection.Vertical)))
      .Items(items =>
      {
          items.Add().Text("Прицепы").Content(@<text> @TruckTrailer() </text>);
          items.Add().Text("Экипажи").Content(@<text> @TruckDriver() </text>);
      })
                        .ToClientTemplate()
)

内网格

    @helper  TruckTrailer()
{
    @(Html.Kendo().Grid<Portal2.Areas.ResourceGrouping.Models.CouplerViewModel>()
            .Name("grid_trailers_#=Id#")
            .Columns(columns =>
            {
                columns.Bound(col => col.TruckRegNum);
                columns.Bound(col => col.TrailerRegNum).EditorTemplateName("TrailerTemplateEditor").Width(100);
                columns.Bound(col => col.StartDate).EditorTemplateName("DateTimeEditor").Width(200);
                columns.Bound(col => col.EndDate).EditorTemplateName("DateTimeEditor").Width(200);
                columns.Command(c => c.Edit());
                columns.Command(c => c.Destroy());

            })
            .Sortable()
            .Editable(editable => editable.Mode(GridEditMode.InLine))
            .ToolBar(toolbar => { toolbar.Create(); })
            .DataSource(data => data
                .Ajax()
                .Sort(sort => sort.Add("StartDate").Descending())
                .Events(events =>
                {
                    events.Error("error_handler");
                })
                .Model(model =>
                {
                    model.Id(m => m.Id);
                })
                //required: назвать поле именем, отличным от TruckId (например OwnerTruckId), иначе кендо отказываетсая работать
                .Create(update => update.Action("JsonCouplerCreate", "TrucksGrouping", new { OwnerTruckId = "#= Id #" }))
                .Read(read => read.Action("JsonCouplerRead", "TrucksGrouping", new { TruckId = "#= Id #" }))
                .Update(update => update.Action("JsonCouplerUpdate", "TrucksGrouping"))
                .Destroy(update => update.Action("JsonCouplerDestroy", "TrucksGrouping"))
            )
            .Pageable(pager => pager.Refresh(true))
            .Filterable(ftb => ftb.Mode(GridFilterMode.Menu))
            .Reorderable(reorder => reorder.Columns(true))
            .ToClientTemplate()
    )
}

Controller

[AcceptVerbs(HttpVerbs.Post)]
    public ActionResult JsonCouplerCreate([DataSourceRequest]DataSourceRequest request, CouplerNewViewModel model)
    {
        Guid newItemId = Guid.Empty;
        if (model != null && ModelState.IsValid)
        {
            newItemId = TrucksGroupingUtility.Create(model, User.Identity.Name);

            var jsonContactsCreate = Json(GetSingleCouplerViewModel(newItemId).ToDataSourceResult(request, ModelState));
            return jsonContactsCreate;
        }

        return Json(new[] { model }.ToDataSourceResult(request, ModelState));

    }

如果我错过了一些必要的代码来理解我的问题,请在评论中写下 - 我会添加

最佳答案

解决方案:在内网格的数据源中添加事件监听

.Events(events => events.Error("error_handler").Sync("sync_handler"))



 function sync_handler(e) {
   this.read();
}

关于javascript - 如何在 asp.net mvc 内联编辑/创建 [kendo ui] 后刷新网格的所有行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32743425/

相关文章:

javascript - 在 d3.js 中自定义比例函数

c# - 如何将 C# 对象传递给 $.ajax

c# - ASP.NET MVC 使用 UIHint 属性生成 DropDownList

charts - 如何为 Kendo DataViz 图表设置背景图像

javascript - 还可以触发点击事件 - KendoUI Mobile Framework

javascript - 错误 :id is already registered

javascript - mvc中实时插入数据

javascript - 为什么这不是 javascript 闭包?

javascript - 在表行 JQuery 中添加和删除类

grid - Web 网格服务器分页在更改页面时触发多个 Controller 调用