New to Kendo UI for jQueryStart a free 30-day trial

Sort ListBox Items on Add

Environment

ProductProgress® Kendo UI® ListBox for jQuery
Created with version2017.3.1026

Description

How can I sort the items between connected ListBoxes when I move items from one ListBox to the other?

Solution

  1. To initially order the items, specify the sort option of the DataSource component.
  2. To sort the items when the user drops a new item, handle the add event and prevent the default behavior.
  3. Manually add the item to the respective DataSource and call the sort() method.
<div id="example" role="application">
    <div class="demo-section k-content">
        <img src="https://demos.telerik.com/kendo-ui/content/web/listbox/arrow-left2right.png" alt="drag-indicator" class="arrow" />
        <br />
        <select id="discontinued"></select>
        <select id="available"></select>
        <img src="https://demos.telerik.com/kendo-ui/content/web/listbox/arrow-right2left.png" alt="drag-indicator" class="arrow" />
    </div>
</div>

<script>
    $(document).ready(function () {
        var crudServiceBaseUrl = "https://demos.telerik.com/service/v2/core",
                dataSource = new kendo.data.DataSource({
                    transport: {
                        read:  {
                            url: crudServiceBaseUrl + "/Products"
                        },
                        update: {
                            url: crudServiceBaseUrl + "/Products/Update",
                            type: "POST",
                    		contentType: "application/json"
                        },
                parameterMap: function (options, operation) {
                    if (operation !== "read" && options.models) {
                        return kendo.stringify(options.models);
                    }
                }
            },
            requestStart: function () {
                kendo.ui.progress($(".demo-section"), true);
            },
            requestEnd: function () {
                kendo.ui.progress($(".demo-section"), false);
            },
            batch: false,
            schema: {
                model: {
                    id: "ProductID",
                    fields: {
                        ProductID: { editable: false, nullable: true },
                        Discontinued: { type: "boolean" },
                    }
                }
            }
        });

        var availableDS = new kendo.data.DataSource({
            sort: { field: "ProductName", dir: "asc" }
        });
        var discontinuedDS = new kendo.data.DataSource({
            sort: { field: "ProductName", dir: "asc" }
        });

        dataSource.fetch(function () {
            var data = this.data();

            var discontinuedData = [];
            var availableData = [];

            for (var i = 0; i < data.length; i++) {
                if (data[i].Discontinued) {
                    discontinuedData.push(data[i]);
                }
                else {
                    availableData.push(data[i]);
                }
            }

            availableDS.data(availableData)
            discontinuedDS.data(discontinuedData);
        });

        $("#discontinued").kendoListBox({
            draggable: true,
            dataSource: discontinuedDS,
            connectWith: "available",
            dropSources: ["available"],
            dataTextField: "ProductName",
            dataValueField: "ProductID",
            toolbar: {
                tools: [ "transferTo", "transferFrom", "transferAllTo", "transferAllFrom"]
            },
            add: function (e) {
                e.preventDefault();

                addItems(this.dataSource, e.dataItems)
                this.dataSource.sort({ field: "ProductName", dir: "asc" });
            }
        });

        $("#available").kendoListBox({
            draggable: true,
            dataSource: availableDS,
            connectWith: "discontinued",
            dropSources: ["discontinued"],
            dataTextField: "ProductName",
            dataValueField: "ProductID",
            add: function (e) {
                e.preventDefault();

                addItems(this.dataSource, e.dataItems)
                this.dataSource.sort({ field: "ProductName", dir: "asc" });
            }
        });

        function addItems(dataSource, items){
          items.forEach(function(item){
            dataSource.data().push(item);
          })
        }


    });
</script>

<style>
    #example .k-listbox .k-item {
        cursor: move;
    }

    #example .arrow {
        padding: 8px 0 5px 238px;
    }

    #save-changes-btn {
        float: right;
        margin-top: 20px;
    }

    #example .demo-section {
        max - width: none;
        width: 555px;
    }

    #example .k-listbox {
        width: 275px;
        height: 310px;
    }
</style>
In this article
EnvironmentDescriptionSolution
Not finding the help you need?
Contact Support