New to Kendo UI for jQuery? Download free 30-day trial

Set MultiSelects to Behave as TagBoxes


Product Progress® Kendo UI® MultiSelect for jQuery


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?


  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.

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

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

                var newValue = newItem.ProductID;
            dataTextField: "ProductName",
            dataValueField: "ProductID",
            dataSource: {
                data: []
            dataBound: onDataBound

See Also

In this article