Response title
This is preview!
Move this topic
Jquery UI Tabs with a lot of data slow on change
in Using jQuery UI
•
4 months ago
Hi all.
I have a page wrote in c# with seven gridviews, each one in a different tab. On page load, i bind all the gridviews with data and using paging to reduce the amount of data of the grid.
When i change from one tabs to another one, it get a lot of seconds to show the content of the other, but the page don't do a new bind. The time is waste just to jquery ui hide the old tab and unhide the selected.
Is there anything to do to reduce this time? I think there is no reason to this delay just to hide and unhide contents.
Ty,
Rafael
I have a page wrote in c# with seven gridviews, each one in a different tab. On page load, i bind all the gridviews with data and using paging to reduce the amount of data of the grid.
When i change from one tabs to another one, it get a lot of seconds to show the content of the other, but the page don't do a new bind. The time is waste just to jquery ui hide the old tab and unhide the selected.
Is there anything to do to reduce this time? I think there is no reason to this delay just to hide and unhide contents.
Ty,
Rafael
1
Replies(13)
Re: Jquery UI Tabs with a lot of data slow on change
4 months ago
The only way to reduce that is to reduce the number of elements that are being shown/hidden. What gridview are you using? My guess would be that the pagination isn't very efficient(does it leave the hidden rows in the dom?)
-- Kevin
-- Kevin
Leave a comment on Kevin B's reply
Re: Jquery UI Tabs with a lot of data slow on change
4 months ago
Not all of the gridviews have a lot of data. For example. The first tab have 3000 rows, with 100 rows/page. The second tab have 20 rows. When i select the second tab, until it unhide the first tab and show the second take 10+ seconds. I'm using normal gridview from c#.
Leave a comment on rafael.addesso's reply
Re: Jquery UI Tabs with a lot of data slow on change
4 months ago
Right, but that's still 3000 records that it has to hide before it can show 20. I'm not familiar with the c# gridview, do you know of an example page that i can view that demonstrates how it handles pagination? ( i don't need to see how it's slow with jQuery UI Tabs )
-- Kevin
-- Kevin
Leave a comment on Kevin B's reply
Re: Jquery UI Tabs with a lot of data slow on change
4 months ago
Kevin, thanks for your attemption.
I found a simple sample on web that shows how does a c# gridview works. There is no tabs on this sample page, cause wasn't me that created it, it is just to show you the gridview. I can upload any grid if you want.
Link: http://www.ezineasp.net/Samples/ASP-Net-cs/GridView-Control/GridView-Paging/Default.aspx
Tks
I found a simple sample on web that shows how does a c# gridview works. There is no tabs on this sample page, cause wasn't me that created it, it is just to show you the gridview. I can upload any grid if you want.
Link: http://www.ezineasp.net/Samples/ASP-Net-cs/GridView-Control/GridView-Paging/Default.aspx
Tks
Leave a comment on rafael.addesso's reply
Re: Jquery UI Tabs with a lot of data slow on change
4 months ago
Is that how your paging works? when you change to page 2 of the table the whole page refreshes?
-- Kevin
-- Kevin
Leave a comment on Kevin B's reply
Re: Jquery UI Tabs with a lot of data slow on change
4 months ago
It is an updatepanel. Don't cause total page refresh. It just make a new bind of the selected page data.
Leave a comment on rafael.addesso's reply
Re: Jquery UI Tabs with a lot of data slow on change
4 months ago
What does this give you after the grids are done loading?
alert($("#tabs table tr").length)
alert($("#tabs *").length)
-- Kevin
-- Kevin
Leave a comment on Kevin B's reply
Re: Jquery UI Tabs with a lot of data slow on change
4 months ago
On first page load:
After data bind:
Time delay to open second tab: 16 seconds
alert($("#tabs table tr").length) = 0
alert($("#tabs *").length) = 73After data bind:
alert($("#tabs table tr").length) = 517
alert($("#tabs *").length) = 15908Time delay to open second tab: 16 seconds
Leave a comment on rafael.addesso's reply
Re: Jquery UI Tabs with a lot of data slow on change
4 months ago
so between 7 gridviews, you have 517 rows. Gridview 2 only has 21(including header) and the rest contain roughly 70 rows each, correct? It doesn't sound quite right.... paginating with 70 rows per page?
-- Kevin
-- Kevin
Leave a comment on Kevin B's reply
Re: Jquery UI Tabs with a lot of data slow on change
4 months ago
Sorry Kevin, the given numbers was only for example. They are not the right numbers. It was only to explain that the data was already bound and the time is been wasted on tab change, not on the bind.
My GridView is set to PageSize = 100. So, here it goes each tab exact number of rows:
Tab 1 = 18666 rows - 100/page
Tab 2 = 57 rows
Tab 3 = 29 rows
Tab 4 = 84 rows
Tab 5 = 25 rows
Tab 6 = 290 rows - 100/page
Tab 7 = 2 rows
Tab 8 = 5593 rows - 100/page
My GridView is set to PageSize = 100. So, here it goes each tab exact number of rows:
Tab 1 = 18666 rows - 100/page
Tab 2 = 57 rows
Tab 3 = 29 rows
Tab 4 = 84 rows
Tab 5 = 25 rows
Tab 6 = 290 rows - 100/page
Tab 7 = 2 rows
Tab 8 = 5593 rows - 100/page
Leave a comment on rafael.addesso's reply
Re: Jquery UI Tabs with a lot of data slow on change
4 months ago
Right, but thats not exactly what i'm looking for
-- Kevin
I want to know how many <tr> elements are in the tab. If it's more than 102 for each page 1 6 and 8, then the grid view's paging system is simply hiding rows rather than removing/detaching them, which could definitely cause the slowdown you are getting.
If the numbers above ARE the number of tr's that exist within each tab, then that's why it's running slow. the browser has to go through 18666+ elements (plus td's, etc) and determine which ones need to be rendered.
I think the gridview IS paginating correctly, and 100 is just too many to page on. To test this, drop the rows per page down to 20 and see if it is any better.
-- Kevin
Leave a comment on Kevin B's reply
Re: Jquery UI Tabs with a lot of data slow on change
4 months ago
Kevin,
I think this is the tr elements on the first tab:
alert($("#tabs-1 table tr").length) = 105
then i should reduce the pagesize property to try to reduce the delay time of change tabs?
I think this is the tr elements on the first tab:
alert($("#tabs-1 table tr").length) = 105
then i should reduce the pagesize property to try to reduce the delay time of change tabs?
Leave a comment on rafael.addesso's reply
Re: Jquery UI Tabs with a lot of data slow on change
4 months ago
Yes, reduce it by a large amount to see if it makes it any better, that would confirm whether or not it is the reason for the slowdown.
-- Kevin
-- Kevin
Leave a comment on Kevin B's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to rafael.addesso's question
Statistics
- 13 Replies
- 629 Views
- 0 Followers
