Edit this page

Sort MultiSelect TagList Programmatically

Environment

Product Progress Kendo UI MultiSelect

Description

How can I alphabetically sort the selected values in the Kendo UI MultiSelect?

Solution

Change the order of the items in the TagList by using the change and dataBound events of the MultiSelect.

<div id="example">
    <div class="demo-section k-content">
        <h4>MultiSelect</h4>
        <select data-role="multiselect"
              data-placeholder="Type a product e.g. 'Chai'"
              data-value-primitive="true"
              data-text-field="ProductName"
              data-value-field="ProductID"
              data-bind="value: selectedProduct,
                         source: products,
                         events: {
                           change: onChange,
                           dataBound: onDataBound
                         }">
        </select>
    </div>
</div>

<script>
    function orderMultiSelect(multi) {
        multi.tagList.find('> li').sort(function (a, b) {
        return $(a).text() > $(b).text();
        }).appendTo(multi.tagList);
    }

    var viewModel = kendo.observable({
        selectedProduct: [
            { ProductID: 1, ProductName: "Chai"},
            { ProductID: 3, ProductName: "Aniseed Syrup"}
        ],
        products: new kendo.data.DataSource({
            transport: {
                read: {
                    url: "https://demos.telerik.com/kendo-ui/service/products",
                    dataType: "jsonp"
                }
            },
            sort: { field: "ProductName", dir: "asc" }
        }),
        onDataBound: function(e) {
            var multi = e.sender;

            orderMultiSelect(multi);
        },
        onChange: function(e) {
            var multi = e.sender;

            orderMultiSelect(multi);
        }
    });
    kendo.bind($("#example"), viewModel);
</script>

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

Give article feedback

Tell us how we can improve this article

close
Dummy