Question

我在KendoUI中遇到Grid小部件的问题。我的页面上有两个网格，每个网格代表数据库中的一个表格。这些网格中的第二个包含将其链接到第一个的外键列。当我在第一个网格中添加或更新一行时，我希望第二个网格中的外键下拉列表能够刷新，但我似乎无法在没有完整页面刷新的情况下实现这一点（我正在尝试避免）。我可以使用JavaScript方法让网格本身正确刷新，但外键的dropwonlist值不会改变。

网页代码：

<div id="TableResults" style="height: 500px; overflow-y: scroll;">
@(Html.Kendo().Grid<SRSDatabaseCore.Data.TranslationTable>()
   .Name("translationGrid")
   .Columns(columns =>
   {
      columns.Bound(p => p.Id);
      columns.Bound(p => p.Sequence);
      columns.Bound(p => p.Description);
   })
   .Editable(editable => editable.Mode(GridEditMode.InCell)) // Use in-cell editing mode
   .DataSource(dataSource => dataSource
      .Ajax()
      .Batch(true)
      .ServerOperation(false)
      .Model(model => 
      {
        model.Id(p => p.Id);
        model.Field(field => field.Id).Editable(false);
      })
      .Create(create => create.Action("Create_TranslationTable", "Modify", new { tableName = ViewData["SelectedTableName"] }))
      .Read(read => read.Action("Read_TranslationTable", "Modify", new { tableName = ViewData["SelectedTableName"] }))
      .Update(update => update.Action("Update_TranslationTable", "Modify", new { tableName = ViewData["SelectedTableName"] }))
   )
   .ToolBar(toolbar =>
   {
     toolbar.Create();
     toolbar.Save();
   })
   .Events(e => e.DataBound("onTranslationModify"))
   .Pageable()
   .Sortable()
)

@(Html.Kendo().Grid<SRSDatabaseCore.Data.TranslationTableSource>()
  .Name("translationSourceGrid")
  .Columns(columns =>
  {
     columns.Bound(p => p.Id);
     columns.ForeignKey(p => p.TranslationTableId, new SelectList((@ViewData["TranslationTableRows"] as List<SRSDatabaseCore.Data.TranslationTable>), "Id", "Description"));
     columns.Bound(p => p.Value);
  })
  .Editable(editable => editable.Mode(GridEditMode.InCell)) // Use in-cell editing mode
  .DataSource(dataSource => dataSource
     .Ajax()
     .Batch(true)
     .ServerOperation(false)
     .Model(model => 
     {
        model.Id(p => p.Id);
        model.Field(field => field.Id).Editable(false);
     })
     .Create(create => create.Action("Create_TranslationTableSource", "Modify", new { tableName = ViewData["SelectedTableName"] }))
     .Read(read => read.Action("Read_TranslationTableSource", "Modify", new { tableName = ViewData["SelectedTableName"] }))
     .Update(update => update.Action("Update_TranslationTableSource", "Modify", new { tableName = ViewData["SelectedTableName"] }))
  )
  .ToolBar(toolbar =>
  {
     toolbar.Create();
     toolbar.Save();
  })
  .Pageable()
  .Sortable()
)
</div>

JavaScript的：

function onTranslationModify(e) {
   var sourceGrid = $('#translationSourceGrid').data('kendoGrid');
   sourceGrid.dataSource.page(1);
   sourceGrid.dataSource.read();
}

控制器：

   public ActionResult Read_TranslationTableSource([DataSourceRequest] DataSourceRequest request, string tableName)
   {
      IEnumerable<TranslationTable> translationTables = DatabaseStructure.GetTranslationTableByName(GetClientNameFromCookie(), tableName, SysConnection);
      ViewData["TranslationTableRows"] = translationTables;

      List<TranslationTableSource> TranslationTableSourceRows = DatabaseStructure.GetTranslationTableSourceByTranslationTableName(GetClientNameFromCookie(), tableName, SysConnection);
      ViewData["SelectedTableName"] = tableName;

      return Json(TranslationTableSourceRows.AsQueryable().ToDataSourceResult(request));
   }

非常感谢任何帮助。

Answer 1

您可以参考以下答案，我认为这将解决您的问题，

Kendo Grid Foreign key column bind dynamically

KendoUI Grid外键不令人耳目一新

1 个答案: