ListBox with many items - paging or another widget?

[jk]

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?

[Stefan]

Hello, Jacqui,

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:

https://dojo.telerik.com/ezogeLIS

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[jk]

Thanks for confirming that ListBox does not work with paging. I tried your sample and the 10,000 item ListBox rendered within a few seconds for me as well. I anticipate at most a few thousand items so I think the ListBox will meet our requirements. Thanks for your assistance.

[Mike]

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.

Any ideas?

[Stefan]

Hello, Mike,

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.

https://www.screencast.com/t/DZ9ViDjgh

Also, the example is using a template which can make the rendering heavier, and we can suggest using the standard rendering in this case:

https://dojo.telerik.com/ezogeLIS

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.

Regards,
Stefan
Progress Telerik

[Mike]

Thanks Stefan.
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:

<div class="demo-section k-content wide">
    <label for="optional" id="employees">All Employees</label>
    <label for="selected">Treat Recipients</label>
    <br />
    @(Html.Kendo().ListBox()
        .Name("optional")
        //.Template("#= FullName #")
        //.DataTextField("Text")
        //.DataValueField("Value")
        .DataSource(source => source
            .Read(read => read.Action("GetEmployees", "Home"))
        )
        .Toolbar(toolbar =>
        {
            toolbar.Position(Kendo.Mvc.UI.Fluent.ListBoxToolbarPosition.Right);
            toolbar.Tools(tools => tools
                .TransferTo()
                .TransferFrom()
                .TransferAllTo()
                .TransferAllFrom()
                //.Remove()

                );
        })
        .ConnectWith("selected")
        .Selectable(ListBoxSelectable.Multiple)
    )

    @(Html.Kendo().ListBox()
        .Name("selected")
        .BindTo(new List<int>())
        .Selectable(ListBoxSelectable.Multiple)
        //.Events(e => e.Add("selectedAdd").Remove("onSelectedRemove"))
    )

</div>

[Mike]

Here is the simplified "GetEmployees" from the Home controller:

 

public JsonResult GetEmployees()
{
    var list = Enumerable.Range(1, 2500).ToList();
    return  Json(list, JsonRequestBehavior.AllowGet);
}

 

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.

 

[Mike]

I forgot to mention we're using .NET 4.5 and Kendo 2018.2.516, developing in VS 2017. Our web server is Windows Server 2016. Sorry, that's probably useful info too.

[Mike]

Hopefully this worked:

https://www.screencast.com/t/VIqgfkNQ

[Stefan]

Hello, Mike,

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:

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

Apologies for the inconvenience this have caused you.

Regards,
Stefan
Progress Telerik

[Mike]

Thank you. We'll keep our eye on the Github thread.