Virtualization in Listbox with many items

[Lee]

I have a kendoListBox with 12,000 items. This is connected with another kendoListBox and has draggable enabled. Each listbox item has a template applied. The listbox is inside of a modal. When I click a button to open the modal there is a 3 second delay for the modal to open. Then when I try to drag an item or click the arrow buttons to move the item to the opposite list there is another 3 second delay before anything happens. The issue occurred when I changed from a list with only a couple hundred items to this large list. I had this problem with some dropdown boxes and fixed those with virtualization but virtualization does not appear to be available or work here. How do I increase performance so that these components are usable?

<div id="baseModal">
    <div class="modal-content">
        <div class="modal-header">
            <div id="baseModalTitle" class="modal-title">My Modal</div>
        </div>
        <div class="modal-body">
            <div id="exceptions" class="kendo-dnd-component">
                <div class="dnd-list-boxes">
                    <div class="available-options-container">
                        <label for="availableItems">Applies To</label>
                        <span class="k-list-filter">
                            <input id="availableItemsSearchBox" class="k-textbox"><span class="k-icon k-i-zoom"></span>
                        </span>
                        <select id="availableItems" class="browser-default"></select>
                    </div>
                    <div class="selected-options-container">
                        <label for="selectedItems">Excludes</label>
                        <span class="k-list-filter">
                            <input id="selectedItemsSearchBox" class="k-textbox"><span class="k-icon k-i-zoom"></span>
                        </span>
                        <select id="selectedItems" class="browser-default"></select>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <div class="right-align">
            <button type="button" class="modal-close waves-effect btn-flat">Cancel</button>
            <button type="button" class="btn waves-effect ">Accept</button>
        </div>
    </div>
</div>

<script>
function createItemsDragLists() {
    // List Boxes
    $("#availableItemsSearchBox").on("input", function (e) {
        var listBox = $("#availableItems").getKendoListBox();
        var sarchString = $(this).val();

        listBox.dataSource.filter({
            logic: "or",
            filters: [
                { field: "itemID", operator: "contains", value: sarchString },
                { field: "itemName", operator: "contains", value: sarchString }
            ]
        });
    });

    $("#selectedItemsSearchBox").on("input", function (e) {
        var listBox = $("#selectedItems").getKendoListBox();
        var sarchString = $(this).val();

        listBox.dataSource.filter({
            logic: "or",
            filters: [
                { field: "itemID", operator: "contains", value: sarchString },
                { field: "itemName", operator: "contains", value: sarchString }
            ]
        });
    });

    $("#availableItems").kendoListBox({
        connectWith: "selectedItems",
        draggable: true,
        autoScroll: true,
        dropSources: ["selectedItems"],
        toolbar: {
            position: "right",
            tools: ["transferTo", "transferFrom", "transferAllTo", "transferAllFrom"]
        },
        selectable: "multiple",
        dataSource: items,
        template: "<span class='listItemID'>#: data.itemID #</span><span class='listItemName'>#: data.itemName#</span>",
        valueTemplate: "#: itemName #",
        dataTextField: "itemName",
        dataValueField: "itemID"
    });

    $("#selectedItems").kendoListBox({
        connectWith: "availableItems",
        draggable: {
            placeholder: function (element) {
                return element.clone().css({
                    "opacity": 0.3,
                    "border": "1px dashed #000000"
                });
            }
        },
        dropSources: ["availableItems"],
        selectable: "multiple",
        template: "<span class='listItemID'>#: data.itemID #</span><span class='listItemName'>#: data.itemName#</span>",
        valueTemplate: "#: itemName #",
        dataTextField: "itemName",
        dataValueField: "itemID"
    });
}
</script>

 

[Lee]

Also, I looked at this post. Another thing to clarify my original post is my items array looks like this: 

items = [
   { itemID: 1, itemName: "Item 1" },
   { itemID: 2, itemName: "Item 2" },
// ... 12000 items
];

[Lee]

Here is a dojo: https://dojo.telerik.com/@dojolee/oBeMUwuQ

You will see there is a lag when dragging and dropping items. That lag is noticeable here and greater on my actual page. If you try adding all 12000 items by clicking the add all button there is also a great delay of several seconds. Any way to improve this?

[Teya]

Hi Lee,

There is an open issue in the Kendo Public repository regarding the same problem here:

https://github.com/telerik/kendo-ui-core/issues/4255

I have increased its priority and you can subscribe to it and get notified once the issue is resolved. Unfortunately, for the time being, I cannot provide you with a decent workaround that would improve the performance, so it would be best to wait for the fix. I would like to apologize for any inconvenience this might cause.

 

Regards,
Teya
Progress Telerik

[Lee]

Thank you.