ListBox with many items - paging or another widget?

11 posts, 0 answers
  1. jk
    jk avatar
    9 posts
    Member since:
    Feb 2010

    Posted 15 May 2018 Link to this post

    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?

  2. Stefan
    Admin
    Stefan avatar
    2525 posts

    Posted 17 May 2018 Link to this post

    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.
  3. jk
    jk avatar
    9 posts
    Member since:
    Feb 2010

    Posted 17 May 2018 Link to this post

    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.
  4. Mike
    Mike avatar
    6 posts
    Member since:
    Oct 2015

    Posted 07 Aug 2018 in reply to Stefan Link to this post

    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?

  5. Stefan
    Admin
    Stefan avatar
    2525 posts

    Posted 08 Aug 2018 Link to this post

    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.
  6. Mike
    Mike avatar
    6 posts
    Member since:
    Oct 2015

    Posted 08 Aug 2018 in reply to Stefan Link to this post

    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>
  7. Mike
    Mike avatar
    6 posts
    Member since:
    Oct 2015

    Posted 08 Aug 2018 in reply to Mike Link to this post

    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.

     

  8. Mike
    Mike avatar
    6 posts
    Member since:
    Oct 2015

    Posted 08 Aug 2018 in reply to Mike Link to this post

    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.
  9. Mike
    Mike avatar
    6 posts
    Member since:
    Oct 2015

    Posted 08 Aug 2018 in reply to Mike Link to this post

  10. Stefan
    Admin
    Stefan avatar
    2525 posts

    Posted 09 Aug 2018 Link to this post

    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.
  11. Mike
    Mike avatar
    6 posts
    Member since:
    Oct 2015

    Posted 09 Aug 2018 in reply to Stefan Link to this post

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