This is a migrated thread and some comments may be shown as answers.

Virtualization in Listbox with many items

4 Answers 125 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Lee
Top achievements
Rank 1
Iron
Iron
Iron
Lee asked on 23 Jan 2020, 09:26 PM

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>

 

4 Answers, 1 is accepted

Sort by
0
Lee
Top achievements
Rank 1
Iron
Iron
Iron
answered on 23 Jan 2020, 10:08 PM

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
];
0
Lee
Top achievements
Rank 1
Iron
Iron
Iron
answered on 23 Jan 2020, 10:30 PM

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?

0
Teya
Telerik team
answered on 27 Jan 2020, 11:51 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Lee
Top achievements
Rank 1
Iron
Iron
Iron
answered on 27 Jan 2020, 03:39 PM
Thank you. 
Tags
ListBox
Asked by
Lee
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Lee
Top achievements
Rank 1
Iron
Iron
Iron
Teya
Telerik team
Share this question
or