Kendo UI Web - MultiSelect: select an option more than once

Question

I'm currently facing a problem with the Kendo UI MultiSelect widget for selecting an option more than once. For example, in the image below I want to select Schindler's List again after selecting The Dark Knight, but unfortunately the MultiSelect widget behaves more like a set than an ordered list, i.e. repetitive selection is not allowed. Is there actually a proper way to achieve this? Any workarounds?

Answer 1

That's the intended behavior of the multi-select control and there is no simple way to make it do what you want using the available configuration options. Possible workarounds are ...

Creating a custom multi-select widget

Something like this should work (note that I haven't tested this much - it lets you add multiples and keeps the filter intact though):

(function ($) {
    var ui = kendo.ui,
        MultiSelect = ui.MultiSelect;

    var originalRender = MultiSelect.fn._render;
    var originalSelected = MultiSelect.fn._selected;

    var CustomMultiSelect = MultiSelect.extend({
        init: function (element, options) {
            var that = this;

            MultiSelect.fn.init.call(that, element, options);
        },

        options: {
            name: 'CustomMultiSelect'
        },

        _select: function (li) {
            var that = this,
                values = that._values,
                dataItem,
                idx;

            if (!that._allowSelection()) {
                return;
            }

            if (!isNaN(li)) {
                idx = li;
            } else {
                idx = li.data("idx");
            }

            that.element[0].children[idx].selected = true;

            dataItem = that.dataSource.view()[idx];

            that.tagList.append(that.tagTemplate(dataItem));
            that._dataItems.push(dataItem);
            values.push(that._dataValue(dataItem));

            that.currentTag(null);
            that._placeholder();

            if (that._state === "filter") {
                that._state = "accept";
            }
            console.log(this.dataSource.view());
        },        

        _render: function (data) {
            // swapping out this._selected keeps filtering functional
            this._selected = dummy;  
            return originalRender.call(this, data);
            this._selected = originalSelected;
        }
    });

    function dummy() { return null; }

    ui.plugin(CustomMultiSelect);
})(jQuery);

Demo here.

Using a dropdown list

Use a simple dropdown list (or ComboBox) and bind the select event to append to your list (which you have to create manually).

For example:

var mySelectedList = [];
$("#dropdownlist").kendoDropDownList({
    select: function (e) {
        var item = e.item;
        var text = item.text();
        // store your selected item in the list
        mySelectedList.push({
            text: text
        });
        // update the displayed list
        $("#myOrderedList").append("<li>" + text + "</li>");
    }
});

Then you could bind clicks on those list elements to remove elements from the list. The disadvantage of that is that it requires more work to make it look "pretty" (you have to create and combine your own HTML, css, images etc.).