按 DataTextField 对 Kendo 多选进行排序答案

【问题标题】：Sort Kendo Multiselects selected Items by DataTextField按 DataTextField 对 Kendo 多选进行排序
【发布时间】：2016-03-14 19:02:12
【问题描述】：

我们正在使用带有 mvc 包装器的 kendo 多选。设置中的所有内容都可以正常工作，但所选项目按数据值字段排序。我只是希望它们按数据文本字段排序，但到目前为止没有任何效果。

@(Html.Kendo().MultiSelectFor(m => m.SelectedPersonIds)
      .HtmlAttributes(new { style = "width: 400px" })
      .DataTextField("Name")
      .DataValueField("PersonID")
      .Filter("contains")
      .Height(400)
      .DataSource(ds =>
      {
       ds.Read(read =>
        {
            read.Action("GetPersons", "Person", new { area = "" });
        });
      })
      .ItemTemplateId("detailTemplate")
      .TagTemplateId("valueTemplate")
)

这是工作版本。我尝试添加

ds.Custom().Sort(s => s.Add("Name").Ascending());

和其他方法，但仍然没有运气。来自服务器的初始数据已排序，因此您选择的列表已完美排序（按名称）。

我怎样才能实现选择项目也按名称而不是按 ID 排序？提前致谢。

【问题讨论】：

标签： asp.net-mvc kendo-ui telerik multi-select

【解决方案1】：

我不知道有没有 ASP.NET 解决方案，但我可以给你 JavaScript 来解决它：

function onMultiselectChange(e) {
        e.sender.tagList.find('> li').sort(function (a, b) {
            return $(a).text() > $(b).text();
        }).appendTo(e.sender.tagList);
    }
});

您可以像这样将它应用到您的 ASP.NET 多选：

.Events(e =>
    {
        e.Change("onMultiselectChange")
    })

【讨论】：

如果有更复杂和有效的方式来对所选项目进行排序会很高兴
请记住，这只会对标签列表进行排序，但不会改变底层数据结构。当您从多选中删除标签时，您可能会在对标签列表进行排序后根据原始索引和当前索引从实际多选中删除不同的项目。这样，您看到的标签列表与底层数据结构不同，后者是在表单中使用时发送回服务器的数据结构。

【解决方案2】：

不要手动重新排列 DOM 元素。这样做会破坏显示项目和内部数据之间的映射。如果您要手动重新排列 DOM 元素，那么取消选择一项将导致在基础数据中取消选择不同的数据项。绑定回服务器会产生不正确的结果。

这是一种正确的排序方式，因为值字段是PersonID，但您希望它按Name排序

function orderMultiSelect(multi) {
    const dataItems = multi.dataItems();
    dataItems.sort(
        (a, b) => {
            const textA = a.Name;
            const textB = b.Name;
            return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
        }
    );
   const values = dataItems.map(di => di.PersonID);
   multi.value(values);
}

function onMultiselectChange(e) {
    orderMultiselect(e.sender);
}

然后，您可以将此处理函数绑定到 DataBound 和 Change 事件：

@(Html.Kendo().MultiSelectFor(m => m.SelectedPersonIds)
    .HtmlAttributes(new { style = "width: 400px" })
    .DataTextField("Name")
    .DataValueField("PersonID")
    .Filter("contains")
    .Height(400)
    .DataSource(
        ds =>
        {
           ds.Read(
              read =>
                  read.Action("GetPersons", "Person", new { area = "" })
             );
        }
      ).ItemTemplateId("detailTemplate")
      .TagTemplateId("valueTemplate")
      .Event(
          e => 
            e.DataBound("onMultiselectChange")
              .Change("onMultiselectChange")
      )
)

http://plnkr.co/edit/0gS9SDeccgOmfsGp?preview

【讨论】：