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

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

12 Answers 232 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Sergey
Top achievements
Rank 1
Sergey asked on 19 Jun 2020, 09:43 AM

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.

12 Answers, 1 is accepted

Sort by
0
Peter Milchev
Telerik team
answered on 24 Jun 2020, 09:03 AM

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.
0
Sergey
Top achievements
Rank 1
answered on 24 Jun 2020, 09:39 AM

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!

0
Peter Milchev
Telerik team
answered on 24 Jun 2020, 09:51 AM

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.
0
Sergey
Top achievements
Rank 1
answered on 24 Jun 2020, 10:50 AM

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!

0
Sergey
Top achievements
Rank 1
answered on 24 Jun 2020, 11:17 AM

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!

0
Sergey
Top achievements
Rank 1
answered on 24 Jun 2020, 12:00 PM

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!

0
Accepted
Peter Milchev
Telerik team
answered on 24 Jun 2020, 01:40 PM

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.
0
Sergey
Top achievements
Rank 1
answered on 02 Jul 2020, 11:54 AM

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.

0
Sergey
Top achievements
Rank 1
answered on 02 Jul 2020, 12:19 PM

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)

0
Sergey
Top achievements
Rank 1
answered on 06 Jul 2020, 08:01 AM

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

Thanks!

0
Sergey
Top achievements
Rank 1
answered on 08 Jul 2020, 10:05 AM
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.
0
Peter Milchev
Telerik team
answered on 13 Jul 2020, 10:05 AM

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

Tags
ListBox
Asked by
Sergey
Top achievements
Rank 1
Answers by
Peter Milchev
Telerik team
Sergey
Top achievements
Rank 1
Share this question
or