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

I have a kendo multiselect i have set up in summary tag mode with this template:

# 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 
# } #

This works but it's hacky. What it does is show the first few entries and then group them if you choose four or more. The kendo ui version of this control has a property that allows what i want to do here to work automatically. [kendoMultiSelectSummaryTag]="3" However that property doesn't seem to be available unless i'm looking in the wrong spot. Can someone tell me how to use it? I would like the default functionality to work because that allows deletions from the selection display.

Solution

As far as I can tell there isn't a simple property you can set that will do this for you. Fortunately the solution isn't too tricky. The idea will be to set the default tagMode to 'multiple' (which is it by default), then to create an event handler which will change the tagMode to 'single' when the number of items is crosses your threshold.

Your multiselect definition will need to attach the event handler to the change event:

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

The javascript event handler will then look something like this:

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);
  }
}

Note that when you update the tagMode you first clear the items, then adjust the mode, then re-select the items. Hope that helps.

Reference