Dynamic Collapsible Panels - Flicker and slow load

Hello,

I have a User Control that dynamically creates several collapsible panels depending on records read from sql db. The panels are created okay, but the page loads slow and flickers several times. It partially loads, displays first panel very quickly and goes blank until all other panels are created and data is loaded. It looks awfull!!

Is there a way to improve the UI?, so the page shows all panels when loaded. It would be good also showing a "wait for a moment" message when creating many panels. What is the best way to do it?

Thank you,

Carlos Lozano

Any one?

Any comments would be helpfull. Thank you.Carlos

I can't help with your issues, but could you show me how you create dynamic panels based on SQL data? Once I get it working, I will discuss with others around here to determine if there is a solution.

Mine works without the flickering. I don't use a code behind in the control that buildds it.

Try to set in web.config <compilation debug="false">

It will improve some performance.

Below is the main code that creates the panel.

Notes:

1) CustomPanel is a customization of Panel class.

2) sNewEndingID is a counter to identify each panel and its controls.

3) TableUtil.AddTableRow function basically adds the <tr><td>controls here</td></tr> to the panel to organize the panel presentation.

4) oOptions.getOptionData("Inspection") Pulls data from SQL DB to populate some of the control options (ie. DropdownList, etc).

-- Code --

public void createInspectorPanel(ref CustomPanel oParentPanel, string sNewEndingID)
{
OptionsObject oOptions = new OptionsObject();
//oParentPanel.Visible = false;

AjaxControlToolkit.CollapsiblePanelExtender oExPanel = new AjaxControlToolkit.CollapsiblePanelExtender();
CustomPanel oPanel = new CustomPanel();
oPanel.ID = "InspectorItem" + sNewEndingID;
if (oParentPanel.Controls.IndexOf(oPanel) == -1)
{
oExPanel.ID = "InspectorPanelExtender" + sNewEndingID;
oExPanel.TargetControlID = "InspectorPanel" + sNewEndingID;
oExPanel.ExpandControlID = "InspectorPanelHeader" + sNewEndingID;
oExPanel.CollapseControlID = "InspectorPanelHeader" + sNewEndingID;
oExPanel.Collapsed = true;
oExPanel.TextLabelID = "lblInspectorControlText" + sNewEndingID;
oExPanel.CollapsedText = sNewEndingID + ") - Click to view details ";
oExPanel.ExpandedText = sNewEndingID + ") - Click to hide details ";
oExPanel.SuppressPostBack = false;
oPanel.Controls.Add(oExPanel);

CustomPanel oPanelHeader = new CustomPanel();
oPanelHeader.ID = "InspectorPanelHeader" + sNewEndingID;
oPanelHeader.CssClass = "collapsePanelHeader";
//oPanelHeader.Width = 300;
oPanelHeader.Width = Unit.Percentage(98);

Label oCounterLabel = new Label();
oCounterLabel.ID = "lblInspectorCounter" + sNewEndingID;
oPanelHeader.Controls.Add(oCounterLabel);

Label oControlLabel = new Label();
oControlLabel.ID = "lblInspectorControlText" + sNewEndingID;
oControlLabel.CssClass = "BTextClass";
oPanelHeader.Controls.Add(oControlLabel);
oPanel.Controls.Add(oPanelHeader);

CustomPanel oDetailPanel = new CustomPanel();
oDetailPanel.ID = "InspectorPanel" + sNewEndingID;
oDetailPanel.Height = 50;
//oDetailPanel.Width = 350;
oDetailPanel.Width = Unit.Percentage(98);

HtmlTable oTable = new HtmlTable();
TableUtil.AddTableRow(ref oTable, 1, "InspectorName", "Name: ", 1, sNewEndingID);
TableUtil.AddTableRow(ref oTable, 2, "CompanyName", "Company: ", 1, sNewEndingID);
DropDownList MPICertLevel = new DropDownList();
TableUtil.AddTableRow(ref oTable, ref MPICertLevel, ";1;2;3", "MPICertLevel", "MPI Cert. Level: ", sNewEndingID);
DropDownList LPCertLevel = new DropDownList();
TableUtil.AddTableRow(ref oTable, ref LPCertLevel, ";1;2;3", "LPCertLevel", "LP Cert. Level: ", sNewEndingID);
DropDownList EMICertLevel = new DropDownList();
TableUtil.AddTableRow(ref oTable, ref EMICertLevel, ";1;2;3", "EMICertLevel", "EMI Cert. Level: ", sNewEndingID);
DropDownList UTCertLevel = new DropDownList();
TableUtil.AddTableRow(ref oTable, ref UTCertLevel, ";1;2;3", "UTCertLevel", "UT Cert. Level: ", sNewEndingID);
//DropDownList Inspection = new DropDownList();
ListBox Inspection = new ListBox();
Inspection.DataTextField = "Description";
Inspection.DataValueField = "Id";
Inspection.DataSource = oOptions.getOptionData("Inspection");
Inspection.Rows = 6;
Inspection.SelectionMode = ListSelectionMode.Multiple;
Inspection.DataBind();
TableUtil.AddTableRow(ref oTable, ref Inspection, "Inspection", "Inspections Done: ", sNewEndingID);
DropDownList TxtPerformance = new DropDownList();
TxtPerformance.DataTextField = "Description";
TxtPerformance.DataValueField = "Id";
TxtPerformance.DataSource = oOptions.getOptionData("InspPerformance");
TxtPerformance.DataBind();
TableUtil.AddTableRow(ref oTable, ref TxtPerformance, "Performance", "Performance: ", sNewEndingID);
TableUtil.AddTableRow(ref oTable, 9, "InspDiscrepancies", "Discrepancies: ", 2, sNewEndingID, 40);

oDetailPanel.Controls.Add(oTable);
oPanel.Controls.Add(oDetailPanel);
oParentPanel.Controls.Add(oPanel);
//oParentPanel.Visible = true;
}
}

Did you set your Content Panel's height to 0px. I'm not sure if I'm reading this correctly but I seeoDetailPanel.Height = 50;Maybe try setting that to 0 and see if that helps with the flickering.

DropDownList Flicker, Rendering and Slow

I keep noticing a flicker on a dropdown with only three items in it. These three items don't change between postbacks, so why is the UpdatePannel rendering them again?

Also, there is a similar problem with listboxes:

UpdatePanel PartialRendering large ListBoxes
http://forums.asp.net/thread/1363249.aspx

and it looks like large listboxes and dropdowns are both taking a long time for the callback to complete. Any ideas?

Try setting the UpdatePanel's

Mode="Conditional"

to fix the UpdatePanel always rendering issue. As to flickering, not sure on that one. I haven't seen it personally, but it may be browser specific. Have you tried this in different browsers to see what the effect is?

Hi,

as Glav suggested, the DropDownList flickering is specific to IE6. It is an issue in how the browser renders boxed elements, and I think it has been fixed in IE7beta.
Regarding the rendering delay, it may be related to dynamic DOM manipulation (for a DropDownList inside an UpdatePanel, recall that it will be rendered and dynamically populated on every partial postback) thus this is not an Atlas-specific issue and also you may experience it on almost all browsers (but maybe IE will be slower than others).

Thanks Paul.

That works for a lot of things. The trouble is I have a robust, windows like UI with a lot of controls in a browser with various master-detail-detail-detail style panels, so:

In the simple case, having several conditional UpdatePanels handle several Controls each, the Triggers aren't too bad between UpdatePanels, but DropDownLists and ListBoxes within the same UpdatePanel still get re-rendered.

Thanks Garbin, that's good to know

I'm not manipulating the DropDownList at all. Even an empty list exhibits this behavior, but it does appear that Atlas is unnecessarily manipulating the DOM for DropDownLists and ListBoxes, so I would need to argue that this is anAtlas-specific issue.

I think DropDownList and ListBoxes still need a lot of work and hopefully it will at least get looked at for the Atlas August CTP, because right now they are ridiculously slow.

See my other post:

UpdatePanel PartialRendering large ListBoxes
http://forums.asp.net/thread/1363249.aspx

From my vantage, it's a big enough of an issue where I wouldn't even consider deploying any sites done with Atlas until this improves. Maxing out the CPU on a client for any length time is just not acceptable.

Best Regards,

Dan

Hi,

dbDan:

I'm not manipulating the DropDownList at all. Even an empty listexhibits this behavior, but it does appear that Atlas is unnecessarilymanipulating the DOM for DropDownLists and ListBoxes, so I would needto argue that this is anAtlas-specific issue.

are you referring to the flickering issue or the slow rendering? The first one is IE-specific, while I can't think of the second one as an Atlas-specific issue, since dynamically adding 5000 items to a ListBox using pure JavaScript (no Atlas) is slowing down IE, FireFox, Opera (I didn't test it on other browsers).

Hi Garbin,

I'm sure you're right about the flickering, but I haven't had a chance to check out IE 7 yet.

This post was intended to be more about "unnecessary" rendering which causes "slow" rendering to occur more often. I guess I'm looking for some way to tell the ScriptManager that certain triggers are to hide/unhide the entire panel or maybe even just one control only, so it could be a little smarter about things.

In any case, it doesn't matter if you create a ListBox with static HTML, with JavaScript or as a Databound ListBox. It originally renders fine. But if it's in an UpdatePanel with PartialRendering enabled, the callback has some serious problems.

This post is just part of the issue, what I consider the real problem is described better in my other post.

http://forums.asp.net/thread/1363249.aspx

It got a low priority. I should have called it the "Atlas Callback CPU Loop Hog" bug or something, to see if that would at least get a semi-low priority :)

So that leaves me wondering if there is a way to get this issue/problem escalated to the point where someone will at least look at to see if its a simple fix or not.

Thanks,

Dan

I have a little more info on this one. I did a release to a Windows 2003 staging server. Although the delay is still obvious, it isn't nearly as bad.

Changing from Debug to Release mode doesn't seem to improve these ListBox and DropDownList delays on my Windows XP development machine.

Hopefully this makes it easier to duplicate or narrow down the problem(s), but I'm not so sure they are entirely on the client side anymore.

I just did some conditional pop-up dialogs based on the data, so I have a temporary workaround demonstration purposes, so I'm moving on to other things.

Does anybody know if this is the best forum to be reporting Atlas bugs?

Thanks,

Dan

Hi,

you can report bugs in these forums or also in theMicrosoft Connect website.

Thanks Garbin

I added these two posts toMicrosoft Connect as:

Atlas PartialRender CPU Bound/Slow with ListBoxes and DropDownLists

https://connect.microsoft.com/VisualStudio/feedback/ViewFeedback.aspx?FeedbackID=178704

Atlas UpdatePanel Trigger for Visible/Hidden Controls

https://connect.microsoft.com/VisualStudio/feedback/ViewFeedback.aspx?FeedbackID=178708

BTW - Like theAtlas Weblog a lot.

Best Regards,

Dan

DropDownList flicker problem

Environment: VS 2005 with Atlas

Problem: I have some textboxes and dropdownlists on a page. When I click on any link to do a postback; all the dropdownlists disappear for few milliseconds and then reappear.

Note: I am not populating the dropdownlist again.

I want to avoid this flicker of dropdownlists.

If anyone has some across suck an issue, please help.

-Jagdish Yadav

Hi there,

Just wonder if you have a code snippet showing this problem.

Regards

Hi,

This is not related to any code. It happens on anyone's page.

If you have a dropdownlist on a page. And to avoid flicker of the page during postback you have applied atlas solution. Then if you do a postback, all the controls on the page remain as they are. But the dropdownlist will flicker (i.e.: it will disappear for a second and come back again). Even though we are not repopulating the dropdownlist on postback.

Please help...

Hi,

does it happen on any browsers?

Hi!

I have just tried this and it flickers in internet explorer but not in mozilla.
Can anybody tell me why this is′nt working?

I am experiencing the same problem. My scenario uses a drop down list in a usercontrol, which is in an update panel.

Anotherthread with the same issuehas not been resolved, however the individual noticed that using Internet Explorer 7 Beta 2 eliminates the problem. Of course this doesn't help those who would like to fix this problem for IE 6.

Has anyone found a fix yet?

Billy

Hi there,

I can confirm the issue even with the June CTP. The flicker happens for dropdownlists in IE6, not in IE7 Beta nor FireFox.

BTW: FireFox is in almost all cases more "ATLAS" aware and enabled, as the IE is... Very strange.

Regards

Hi,

this is not an issue of the Atlas framework. It is an issue in the way IE6 renders this type of boxed list.