Hello,
I have strong performance problems with the ListBox when working with 10,000+ records. On the one hand, it takes a very long to display the data, on the other hand, the search takes a very long time if you have a lot of hits. It also takes a very long time to delete the searched word. Drag and drop is also very slow. Is there any way to improve the performance? The version I am using is from late 2020!
For example, when searching for "name5" it takes a long time to display the results, when deleting "name5" from the search box the performance is also poor.
Here I use only 2 listboxes, in my project I need 3, which makes the performance even worse.
Just for your information, I actually do not generate the data locally it's just for this example to generate enough datasets.
Thanks for your help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.1109/styles/kendo.default-ocean-blue.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.1109/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.1109/js/kendo.all.min.js"></script>
<title>Kendo Listbox</title>
</head>
<body>
<script id="listbox_template" type="text/kendo-x-tmpl">
<div>
<table class="listbox_trueberschrift" style="width:100%;">
<colgroup>
<col style="width:140px;">
<col style="width:180px;">
</colgroup>
<tr style="display:none;">
<td class="listbox_tdueberschrift" nowrap>Code</td>
<td class="listbox_tdueberschrift" nowrap>Beschreibung</td>
</tr>
<tr>
<td nowrap>#:OrderID#</td>
<td nowrap>#:ShipName#</td>
</tr>
</table>
</div>
</script>
<div id="example" role="application">
<div class="demo-section wide">
<input type='text' id='searchBox' class='k-input k-textbox k-input-solid k-input-md k-rounded-md' placeholder='Suchen' />
<div>
<select id="listbox1"></select>
<select id="listbox2"></select>
</div>
</div>
<script>
const maxRecords = 10000;
let dataSource2 = [];
let dataSource3 = [];
class MyData{}
function generateData(){
for (let i = 1; i <= maxRecords; i++) {
let myData = new MyData();
myData.OrderID = i;
myData.ShipName = "ShipName" + i;
if(i <= 5000) dataSource2.push(myData);
else dataSource3.push(myData);
}
};
generateData();
$(document).ready(function () {
$("#searchBox").on("input",function(e) {
var listBox1 = $("#listbox1").getKendoListBox();
var listBox2 = $("#listbox2").getKendoListBox();
var sarchString = $(this).val();
listBox1.dataSource.filter({ field: "ShipName", operator: "contains", value: sarchString });
listBox2.dataSource.filter({ field: "ShipName", operator: "contains", value: sarchString });
});
$("#listbox1").kendoListBox({
connectWith: "test",
draggable: true,
dropSources: ["listbox2"],
selectable: "multiple",
dataSource: dataSource2,
dataTextField: "ShipName",
dataValueField: "OrderID",
template: kendo.template($("#listbox_template").html()),
toolbar: {
tools: ["moveUp", "moveDown", "transferTo", "transferFrom", "transferAllTo", "transferAllFrom", "remove"]
}
});
$("#listbox2").kendoListBox({
draggable: true,
dropSources: ["listbox1"],
dataSource: dataSource3,
selectable: "multiple",
dataTextField: "ShipName",
dataValueField: "OrderID",
template: kendo.template($("#listbox_template").html()),
});
});
</script>
</div>
<style>
.demo-section label {
margin-bottom: 5px;
font-weight: bold;
display: inline-block;
}
#example .demo-section {
max-width: none;
width: 600px;
}
#example .k-listbox {
width: 236px;
height: 350px;
}
#example .k-listbox:first-of-type {
width: 270px;
margin-right: 1px;
}
</style>
</body>
</html>1 Answer, 1 is accepted
Hello Sterling,
This performance problem when transferring multiple items is more or less expected because each item will have to be removed from one dataSource and added to another dataSource. Since the selected items could be across the collection, each record will be removed separately and this is what causes the delay.
I can suggest adding a Kendo UI Pager component for the ListBoxes and displaying fewer records per page. This will fix the performance problem and will give the user a clearer view of when many records are used. Please check out the following Dojo I prepared demonstrating this:
Please let me know if you have any questions.
Regards,
Nikolay
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.