使用帶有 Kendo UI 網格的復雜視圖模型時，排序和過濾會中斷

Question

我正在為 ASP.NET Core 使用 Kendo UI。 我正在使用 Kendo Grid 並且需要以下功能才能工作：排序、過濾、編輯（在單元格中包含客戶組合框）。 事實證明，您需要一個復雜視圖模型來讓編輯器模板按照本文檔工作，但復雜視圖模型破壞了網格的排序和過濾功能。 由於網格嘗試對對象而不是單個字段進行排序和搜索。

我有一個如下所示的 ViewModel：

public class ProjectViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }

    [UIHint("CustomersEditor")]
    public CustomerViewModel Customer { get; set; }
}

我使用它作為我的劍道網格模型：

@(Html.Kendo().Grid(Model)
      .Name("grid")
      .Columns(columns =>
      {
          columns.Bound(c => c.Customer).Title("Customer").ClientTemplate("#= Customer.Name#");
          columns.Command(command => { command.Edit(); command.Destroy(); }).Width(300);
      })
      .Editable(editable => editable.Mode(GridEditMode.InLine))
      .Sortable()
      .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
      .Pageable(pageable => pageable
          .Refresh(true)
          .PageSizes(true)
          .ButtonCount(5))
      .DataSource(dataSource => dataSource
          .Ajax()
          .PageSize(20)
          .Model(model =>
          {
              model.Id(item => item.Id);
          })
          .Create(update => update.Action("Projects_Create", "Projects"))
          .Read(read => read.Action("Projects_Read", "Projects"))
          .Update(update => update.Action("Projects_Update", "Projects"))
          .Destroy(update => update.Action("Projects_Destroy", "Projects"))
      )
      )

如您所見，我將屬性 Customer 指定為綁定列，並在未處於編輯模式時將客戶端模板設置為 Customer.Name。

我將列屬性設置為 Customer 對象的原因是，當網格處於編輯模式時，我在此列內使用了 ComboBox 編輯器模板。 我相信這是按照本文檔執行此操作的唯一方法。

@(Html.Kendo().ComboBoxFor(x => x)
    .Placeholder("Select a customer...")
    .DataValueField("Id")
    .DataTextField("Name")
    .BindTo((List<CustomerViewModel>)ViewData["customers"])
)

使用上述設置，除了由於 Customer 列導致排序/過濾被破壞的事實外，一切正常。

因為我相信我無法告訴網格使用 Customer.Name 進行排序/過濾而不是 Customer。 無論如何，我仍然可以使用平面視圖模型實現 ComboBox 編輯器模板嗎？

Answer 1

嘗試將“columns.Bound(c => c.Customer)”更改為columns.Bound(c => c.Customer.Name)

這將使過濾和排序工作，因為“名稱”是一個簡單的類型。

在編輯器模板組合框上，將其命名為“Customer”，因此 .Name("Customer)

這對我有用，我遇到了與您完全相同的問題，遵循 Telerik 的編輯器模板文檔，但排序/過濾失敗了。 如果它對你有用，我 90% 肯定這是因為劍道框架將 DataValueField "Id" 與 Customer 列對象的 "Id" 屬性匹配，即使你將 Customer.Name 本身指定為綁定字段。

Answer 2

不是你可能想聽到的答案，但如果你改變

.Filterable(ftb => ftb.Mode(GridFilterMode.Row))

到

.Filterable(ftb => ftb.Mode(GridFilterMode.Menu))

過濾應該有效。 我認為這是一個錯誤，但在他們的支持團隊回復我之前不會知道。