Edit this page

Change Multiselect Tag Mode Based on the Number of Selected Items

Environment

Product Progress Kendo UI MultiSelect
Operating System Windows 10 64bit
Browser Google Chrome
Browser Version 61.0.3163.100 (Official Build) (64-bit)

Description

How can I set the multiple tag mode of the MultiSelect for the first X number of selected items and switch the tag mode to single if the user selects more than X items?

Solution

  1. To get the current count of selected items, handle the change event of the MultiSelect.

  2. If the current count exceeds the predefined number, change the tag mode through the setOptions method of the MultiSelect.

<select id="multiselect">
</select>
<script>
    $(document).ready(function(e) {
        $("#multiselect").kendoMultiSelect({
            dataSource: ["Item1", "Item2", "Item3", "Item4"],
            value: ["Item2", "Item3"],
            tagMode: "multiple",
            change: function() {
                var selectedValues = this.value();
                var currentTagMode = this.options.tagMode;
                var newTagMode = currentTagMode;
                if (selectedValues.length <= 2) {
                    newTagMode = "multiple";
                } else {
                    newTagMode = "single"
                }
                if (newTagMode != currentTagMode) {
                    this.value([])
                    this.setOptions({
                        tagMode: newTagMode
                    });
                    this.value(selectedValues);
                }
            }
        });

    })
</script>

For the complete implementation of the approach, refer to this runnable example.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy