Set MultiSelects to Behave as TagBoxes

Environment

Product

Progress® Kendo UI® MultiSelect for jQuery

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-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) {
					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

• JavaScript API Reference of the MultiSelect
• Demo on Adding New MultiSelect Items