Multiple RadListBox's are being rendered to slow due to huge amount of rows

13 posts, 1 answers
  1. Sergey
    Sergey avatar
    9 posts
    Member since:
    Mar 2017

    Posted 19 Jun Link to this post

    Hello,

     

    I have an ascx-control is being placed 7 times at the aspx-page.

    All controls render the same huge amount of rows: 2400.

     

    The 1st control takes ~1 sec to render.

    The 2nd - ~3 sec.

    The 3rd - ~15 sec.

    The 4th - ~25 sec.

    The 5th - ~40 sec.

    The 6th - ~65 sec.

    The 7th - ~105 sec.

    To render all controls on client it takes about 6 min, regardless the first 2 controls is being rendered almost immediately.

     

    This is reproduced only on the Google Chrome the latest version (83.0.4103.97).

    I did a try on the Chrome v.81, and there is no performance issue.

    Also, there is no performance issue on the following browsers: Mozilla Firefox, IE 11, Edge.

     

    Please see below usage of the RadListBox:

     

    <telerik:RadListBox ID="RadListBox1" 

                        OnItemDataBound="RadListBox1_ItemDataBound" 
                        CheckBoxes="true" 
                        OnClientItemChecked="ItemChecked" 
                        Width="100%" Height="200px" 
                        SelectionMode="Single" 
                        DataTextField="Name" 
                        DataValueField="ID" 
                        EmptyMessage="No Rows" 
                        OnClientLoad="SetInitialEnable"
                        runat="server"></telerik:RadListBox>

     

    And set items at the ascx.cs:

                DataTable list = GetList();
                RadListBox1.DataSource = list;
                RadListBox1.DataBind();

     

    Actually I have tried the Load On Demand feature, the controls have been loaded even immediately, but all custom js were failed.

    Please advice.

  2. Peter Milchev
    Admin
    Peter Milchev avatar
    857 posts

    Posted 24 Jun Link to this post

    Hello Sergey,

    I have tested with both Chrome and Chrome Canary (the Google Chrome but 2 versions ahead):

    • Chrome Version 83.0.4103.116 (Official Build) (64-bit);
    • Chrome Canary Version 85.0.4181.0 (Official Build) canary (64-bit)

    Both versions load the attached project almost instantly, 8 UserControls with 2450 ListBox items each. Due to the enormous amount of HTML elements that are rendered, the built-in virtualization of the browser renders them one after the other:

    Regards,

    Peter Milchev
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Sergey
    Sergey avatar
    9 posts
    Member since:
    Mar 2017

    Posted 24 Jun in reply to Peter Milchev Link to this post

    Hello Peter,

    Thanks a lot for your answer and participation, appreciate it!

     

    I have tried the ListBoxPerformance project attached, and there is indeed no performance issue.

    But once I have added the CheckBoxes="true", the issue is becoming reproduced:

    <telerik:RadListBox runat="server" ID="RadListBox1" Height="300px" CheckBoxes="true" >
    </telerik:RadListBox>

     

    Could you please retest with our updates?

    Thanks in advance!

  4. Peter Milchev
    Admin
    Peter Milchev avatar
    857 posts

    Posted 24 Jun Link to this post

    Hello Sergey,

    Again, it loads just a little bit slower but quick enough:

    Please try updating the browser and the issue should be gone.

    Regards,
    Peter Milchev
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  5. Sergey
    Sergey avatar
    9 posts
    Member since:
    Mar 2017

    Posted 24 Jun in reply to Peter Milchev Link to this post

    Peter,

    Sorry for annoying.

     

    The issue with performance is being reproduced at the several machines, all of this machines use the latest version of the Google Chrome: Version 83.0.4103.106 (Official Build) (64-bit).

    It takes me 4 min to full load. I have tried to attach the video, but there is limitation for the attached files.

     

    Thanks!

  6. Sergey
    Sergey avatar
    9 posts
    Member since:
    Mar 2017

    Posted 24 Jun in reply to Sergey Link to this post

    Peter,

     

    I managed to load video on youtube, hope it's not forbidden to attach video from the youtube.

    https://www.youtube.com/watch?v=pObMZmXhpQk&feature=youtu.be

     

    Please advice.

    Thanks!

  7. Sergey
    Sergey avatar
    9 posts
    Member since:
    Mar 2017

    Posted 24 Jun Link to this post

    Peter,

     

    I have finally updated to the version of the Chrome you mentioned before (Chrome Version 83.0.4103.116 (Official Build) (64-bit)), and the issue was indeed gone.

     

    Just to double check, there is no way to resolve it at the older version (83.0.4103.106), only update the browser, am I correct?

    Thanks!

  8. Answer
    Peter Milchev
    Admin
    Peter Milchev avatar
    857 posts

    Posted 24 Jun Link to this post

    Hello Sergey,

    If the issue is resolved with a browser update, there is not much you can do to fix it. 

    The good thing is that Google Chrome tries to force browser updates as soon as possible, so in a few days or weeks, everyone should be with a version that includes the fix. Another option is for the system administrator to force an update.

    Regards,
    Peter Milchev
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  9. Sergey
    Sergey avatar
    9 posts
    Member since:
    Mar 2017

    Posted 02 Jul Link to this post

    Peter, hello once again.

    We are still struggling with this control issue.

    Currently we receive the screen attached when DevTools is opened on the Google Chrome.

    I believe it can relates to the OnItemDataBound event:

    <telerik:RadListBox ID="RadListBox1" 
                        Height="300px" 
                        CheckBoxes="true"
                        OnItemDataBound="RadListBox1_OnItemDataBound"
                        runat="server"> 
    </telerik:RadListBox>

     

        protected void RadListBox1_OnItemDataBound(object sender, RadListBoxItemEventArgs e)
        {
            DataRowView dataSourceRow = (DataRowView)e.Item.DataItem;
            e.Item.Checked = (bool)dataSourceRow["IsChecked"];
        }

     

     

    But actually I was not able to reproduce it at the test project you shared.

    Please advice.

  10. Sergey
    Sergey avatar
    9 posts
    Member since:
    Mar 2017

    Posted 02 Jul Link to this post

    Additionally, the slowness issue, which we discussed previously, is returned back.

    I have not done anything with the browser: Version 83.0.4103.116 (Official Build) (64-bit)

  11. Sergey
    Sergey avatar
    9 posts
    Member since:
    Mar 2017

    Posted 06 Jul Link to this post

    The issue was resolved, I believe, with disabled ViewState.

    Thanks!

  12. Sergey
    Sergey avatar
    9 posts
    Member since:
    Mar 2017

    Posted 08 Jul in reply to Peter Milchev Link to this post

    Hello Peter,

    Sorry for annoy, but the performance issue have returned back.

    Even it is being reproduced at the sample project, which your shared with me: it takes approximately 3 min to full load.

    I have not changed anything in it, and did not do anything with the browser (Version 83.0.4103.116 (Official Build) (64-bit)).

    Once we reinstall the Chrome, the issue is being gone, but then after several hours / days returned back.

    Please, advise.
  13. Peter Milchev
    Admin
    Peter Milchev avatar
    857 posts

    Posted 13 Jul Link to this post

    Hello Sergey,

    I am still unable to observe the issue with the performance. 

    For a test, I have attached a modified version of the project where only the HTML of the big listboxes is loaded. This will show if the issue is actually related to the ListBox or the browser has issues rendering that amount of HTML.

    Meanwhile, you can use the performance profiling abilities of the Chrome's DevTools to see what exactly is slowing down the page - is it the response from the server, is it the internet connection that downloads the data or is it the browser rendering.

    Regards,
    Peter Milchev
    Progress Telerik

Back to Top