jquery - Kendo UI 网格外键不刷新

Question

我在使用 KendoUI 中的网格小部件时遇到问题。我的页面上有两个网格，每个网格代表数据库中的一个表。这些网格中的第二个包含将其链接到第一个的外键列。当我在第一个网格中添加或更新行时，我希望刷新第二个网格中外键的下拉列表，但如果没有整页刷新(我试图避免)，我似乎无法实现这种情况。我可以使用 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();
}

Controller :

   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