In my application, I need to assign items to groups. I would like to use the ListBox widget (https://demos.telerik.com/aspnet-mvc/listbox) because I like its built-in transfer controls. This would allow me to display the unassigned items in one ListBox, the assigned items in another ListBox, and then transfer the items from Unassigned to Assigned, or vice versa.
However, I may have several thousand items in a list and I doubt it would be performant for the ListBox to show all of these at once. Is there a way to add paging to the ListBox? If not, is there a different widget you would suggest? I did see a StackOverflow article where someone used two Kendo grids for this purpose. If that is the best option, do you have a complete example?
10 Answers, 1 is accepted
Thank you for the details.
In general, the ListBox is not intended to work with paging.
Still, displaying a couple of thousand items should not be an issue.
This is one of the controls with a simple rendering, and it could be able to display a large number of items.
Some issue could be observed based on the machine and the browser, but in the same environment, other widgets could become slow as well.
For demonstration purposes I made an example with 10 000 records and it is rendered almost instantly on my end:
I hope this is helpful.
Hi, I'm running into this same issue and seeing huge performance issues with a record set of 2200 in IE 11. Even trying your linked demo runs really slow in IE. There is no issue in Chrome.
I tested the ListBox with 2200 items on IE 11 and it was performing well on my end.
Please have in mind that the Kendo UI has not full control over how fast a specific browser is handling the DOM manipulations. We have optimized the widget, but still, the performance may vary depending on the used machine and the used browser.
Also, the example is using a template which can make the rendering heavier, and we can suggest using the standard rendering in this case:
If the issue still occurs, please provide an example where the slower performance is observed and we will check if we can offer different optimizations based on the specific case.
With your previous example once I got to 6000 items I noticed performance. With the object we're using in house is where the 2200 items showed performance slowing.
Here is the list boxes in our view:
"demo-section k-content wide"
//.Template("#= FullName #")
.DataSource(source => source
.Read(read => read.Action(
toolbar.Tools(tools => tools
//.Events(e => e.Add("selectedAdd").Remove("onSelectedRemove"))
Here is the simplified "GetEmployees" from the Home controller:
var list = Enumerable.Range(1, 2500).ToList();
Highlighting the rows doesn't seem bad for performance, but as soon as you trigger the change event by selecting an item or trying to move it to the other ListBox is where you can see it take a long time.
If I can figure out a screen capture I'll post a link as well.
Thank you for the video.
The transfers are indeed slow on my end as well. This occurs because after an item is transferred the ListBox is re-initialized.
We have a GitHub issue for optimizing this process. Please monitor the issue as we will post updates once the optimizations are made:
Apologies for the inconvenience this have caused you.