Last post Apr 29, 2010 09:11 AM by Nailuj
Apr 27, 2010 09:19 AM|Nailuj|LINK
I'm maintaining an ASP.NET site where users can log on to register some set of data (for statistical purposes). One user registers data for a set of units, and for each of these units a set of forms are to be filled out (with a handful of fields in each
form, but that doesn't matter here). One scenario is that a user has 12 units, and in each of these units there is 25 forms to be filled, meaning a total of 300 forms.
The ASP.NET page for registering these data is made the following way: each form is in a panel that can be collapsed using an AjaxControlToolkit CollapsiblePanelExtender, and all forms in a unit is inside another panel that also can be collapsed. The result
is that you have a tree view-like structure with the units on the top, and under each unit you can expand a set of forms, and further each form can be expanded to fill data (the page is loaded with all panels collapsed by default).
The page is generated completely dynamically (as forms can be added in a database), and for generating the CollapsiblePanelExtenders I have the following code:
private CollapsiblePanelExtender GenerateCollapsiblePanelExtender(string id, Panel headerPanel, Panel contentPanel)
CollapsiblePanelExtender collapsiblePanel = new CollapsiblePanelExtender();
collapsiblePanel.ID = id + ID_COLLAPSIBLE_PANEL_POSTFIX;
collapsiblePanel.TargetControlID = contentPanel.ID;
collapsiblePanel.CollapseControlID = headerPanel.ID;
collapsiblePanel.ExpandControlID = headerPanel.ID;
collapsiblePanel.Collapsed = true;
collapsiblePanel.BehaviorID = collapsiblePanel.ID + ID_BEHAVIOUR_POSTFIX;
With one user having 12 units each with 25 forms, this means a total of 312 CollapsiblePanelExtenders. As I said, they are all set to be collapsed by default, but here's the problem:
When the page loads, they all appear to be expanded, and then the browser "starts collapsing them". This however takes a
very long time (in Firefox I even get a warning about an unresponsive script, IE and Chrome only takes forever but without the warning). When all the "collapsing" is complete it works smooth to open and close single panels, but users have complained
about the extremely slow initial loading.
I tried removing the CollapsiblePanelExtenders alltogether (simply dipalying all my header and content Panels directly), and that worked withing a reasonable time frame, allthought the page was
very long (and is then hard to navigat in, which is why our users want to be able to collapse sections).
So my question is simple: is there a way to optimize this so that the loading goes smoother? Is it for instance possible to only load the header panels in each CollapsiblePanelExtender initially, and then load the content panel asynchronously in some way?
One final clarification:
I know I could simply change the design of the page to only include one unit and thus reducing size of the contents drastically, but I hope to avoid this (users prefer the way with everything in one page). It would also mean a rather large change to the logic
of the page (yes, I know - it's a poor code base at that point)
"Ajax Control Toolkit"
collapsible Panel Extender
Apr 27, 2010 11:46 AM|sundeep_38|LINK
Actually I had to face same issue while having update panels on the screen. As the requirments went on, I needed to add many & many update panels and thus reducing the response time on the page.
Apr 28, 2010 08:48 AM|Nailuj|LINK
Thank you for your answer Sundeep!
I will definitely look into using jQuery. Hope this solves my problem (and if not, I'll just come back asking more annoying questions
Apr 29, 2010 09:11 AM|Nailuj|LINK
I've now played a bit around with the suggested jQuery solution, and I would just like to add that it works perfectly! And the collapsing/expading using jQuery is soo much smoother and nicer than what it looked like when using the CollapsiblePanelExtender!
And the pages takes no time to load either
So if anybody else should be interested, my solution was simply to skip the CollapsiblePanelExtender alltogether. Instead I have one single little jQuery script that handles everything. So in case anybody else should be looking for this, here's my script:
So thanks again to Sundeep!