Edit this page

Set MultiSelects to Behave as TagBoxes

Environment

Product Progress Kendo UI MultiSelect

Description

I want to enable the MultiSelect to:

  • Accept custom text.
  • Display the custom text as a tag by automatically adding the free text entry to its DataSource.
  • Not open its drop-down.

How can I configure and customize the MultiSelect to behave as a TagBox?

Solution

  1. Attach a handler for the keyup event of Enter to the input element of the MultiSelect. As a result, the handler adds the new text to the DataSource and selects the newly created entry.

  2. Use a CSS rule to force the pop-up to always remain hidden.

<style>
    #products-list {
        display: none !important;
    }
</style>
<select id="products" style="width: 100%;"></select>
<script>
    $(document).ready(function() {
        var currentId = 1;

        function onDataBound(e) {
            $('.k-multiselect .k-input').unbind('keyup');
            $('.k-multiselect .k-input').on('keyup', onClickEnter);
        }
        function onClickEnter(e) {
            if (e.keyCode === 13) {
                var widget = $('#products').getKendoMultiSelect();
                var dataSource = widget.dataSource;
                var input = $('.k-multiselect .k-input');
                var value = input.val().trim();
                if (!value || value.length === 0) {
                    return;
                }
                var newItem = {
                    ProductID: currentId ++,
                    ProductName: value
                };

                dataSource.add(newItem);
                var newValue = newItem.ProductID;
                widget.value(widget.value().concat([newValue]));
            }
        }
        $("#products").kendoMultiSelect({
            dataTextField: "ProductName",
            dataValueField: "ProductID",
            dataSource: {
                data: []
            },
            dataBound: onDataBound
        });
    });
</script>

See Also

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

Give article feedback

Tell us how we can improve this article

close
Dummy