Kendo 多选在做出一些选择后启用摘要标记模式

Question

我有一个 kendo 多选，我已使用此模板在摘要标记模式下设置：

# if (dataItems.length < 4) { # 
    # for (var idx = 0; idx < values.length; idx++) {#
        #:dataItems[idx].Name# 
        # if (idx < values.length - 1) {#</li><li class="k-button" unselectable="on">  # } #
    #}#
# } else {#
    #:values.length# item(s) selected 
# } #

这行得通，但很麻烦。它的作用是显示前几个条目，然后如果您选择四个或更多则将它们分组。此控件的 kendo ui 版本有一个属性允许我想在这里做的事情自动工作。 [kendoMultiSelectSummaryTag]="3" 但是属性似乎不可用，除非我找错了地方。有人可以告诉我如何使用它吗？我希望使用默认功能，因为它允许从选择显示中删除。

Answer 1

据我所知，没有一个简单的属性可以为您设置。幸运的是，解决方案并不太棘手。这个想法是将默认值 tagMode 设置为 'multiple'（默认情况下是这样），然后创建一个事件处理程序，当项目数量超过您的阈值。

您的 multiselect 定义需要将事件处理程序附加到 change 事件：

@(Html.Kendo().MultiSelect()
  .Name("multiSelect")
  // other properties as needed of course
  .Events(events => events
    .Change("tagModeSet")
  )
)

javascript 事件处理程序将如下所示：

function tagModeSet() {
  // Get the currently selected values and tagMode
  var selectedValues = this.value();
  var currentTagMode = this.options.tagMode;
  var newTagMode = currentTagMode;

  // Test to see if you have crossed the threshold
  if (selectedValues.length <= 3) {
    newTagMode = "multiple";
  } else {
    newTagMode = "single"
  }

  // Update the tagMode if needed
  if (newTagMode != currentTagMode) {
    this.value([]);
    this.setOptions({
      tagMode: newTagMode
    });
    this.value(selectedValues);
  }
}

请注意，更新tagMode时先清除项目，然后调整模式，然后重新select项目。希望对您有所帮助。

Reference

Kendo 多选在做出一些选择后启用摘要标记模式

Kendo multiselect enable summary tag mode after a few selections are made

kendo-asp.net-mvc

kendo-multiselect