0

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.

John Lord
  • 1,941
  • 12
  • 27

1 Answers1

1

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

MentallyRecursive
  • 649
  • 4
  • 12
  • I will check this out when i get a chance. Probably not until this weekend though. thank you for your answer. It looks like clearing and re-setting the values was the secret sauce i was missing. – John Lord Dec 25 '19 at 23:24
  • I was able to make this work (sorry about the huge delay in trying it, but i was just now sent back to multiselects). However you need to fix two problems before i mark it as accepted answer. You're missing a semicolon after this.value([]) and your function name you call isn't what you called it. – John Lord May 04 '20 at 17:42