使用带有 Kendo UI 网格的复杂 ViewModel 时排序和过滤中断答案

【问题标题】：Sorting and Filtering breaks when using a Complex ViewModel w/ Kendo UI grid使用带有 Kendo UI 网格的复杂 ViewModel 时排序和过滤中断
【发布时间】：2018-06-20 03:59:25
【问题描述】：

我正在为 ASP.NET Core 使用 Kendo UI。我正在使用剑道网格，需要以下功能才能工作：排序、过滤、编辑（单元格中带有客户组合框）。事实证明，您需要一个复杂视图模型才能使编辑器模板按照this documentation 工作，但是复杂视图模型破坏了网格的排序和过滤功能。因为网格试图对一个对象而不是单个字段进行排序和搜索。

我有一个如下所示的 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 指定为绑定列，并在未处于编辑模式时将 Client Template 设置为 Customer.Name。

我将列属性设置为 Customer 对象的原因是，当网格处于编辑模式时，我在此列内使用了组合框编辑器模板。我相信这是做到这一点的唯一方法as per this documentation。

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

通过上述设置，除了排序/过滤由于客户列而被破坏之外，一切正常。

因为我相信我无法告诉网格使用 Customer.Name 而不是 Customer 进行排序/过滤。无论如何我仍然可以使用平面视图模型实现组合框编辑器模板吗？

【问题讨论】：

标签： c# kendo-ui telerik kendo-ui-mvc kendo-ui-grid

【解决方案1】：

不是你可能想听到的答案，但如果你改变了

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

到

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

过滤应该可以工作。我认为这是一个错误，但直到他们的支持团队回复我才知道。

【讨论】：

【解决方案2】：

尝试将“columns.Bound(c => c.Customer)”更改为columns.Bound(c => c.Customer.Name)

这将使过滤和排序工作，因为“名称”是一个简单的类型。

在编辑器模板组合框中，将其命名为“客户”，因此 .Name("客户)

这对我有用，我遇到了与您完全相同的问题，遵循 Telerik 的编辑器模板文档，但排序/过滤失败。如果它对您有用，我 90% 确定这是因为 kendo 框架将 DataValueField“Id”与 Customer 列对象的“Id”属性相匹配，即使您将 Customer.Name 本身指定为绑定字段。

【讨论】：