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

ListBox with many items - paging or another widget?

10 Answers 159 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
jk
Top achievements
Rank 1
jk asked on 15 May 2018, 02:54 PM

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

Sort by
0
Stefan
Telerik team
answered on 17 May 2018, 06:07 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
jk
Top achievements
Rank 1
answered on 17 May 2018, 01:48 PM
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.
0
Mike
Top achievements
Rank 1
answered on 07 Aug 2018, 08:48 PM

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?

0
Stefan
Telerik team
answered on 08 Aug 2018, 06:22 AM
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
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
Mike
Top achievements
Rank 1
answered on 08 Aug 2018, 01:53 PM

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>
0
Mike
Top achievements
Rank 1
answered on 08 Aug 2018, 01:55 PM

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.

 

0
Mike
Top achievements
Rank 1
answered on 08 Aug 2018, 01:59 PM
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.
0
Mike
Top achievements
Rank 1
answered on 08 Aug 2018, 02:17 PM
0
Stefan
Telerik team
answered on 09 Aug 2018, 07:07 AM
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
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
Mike
Top achievements
Rank 1
answered on 09 Aug 2018, 01:13 PM
Thank you. We'll keep our eye on the Github thread.
Tags
ListBox
Asked by
jk
Top achievements
Rank 1
Answers by
Stefan
Telerik team
jk
Top achievements
Rank 1
Mike
Top achievements
Rank 1
Share this question
or