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 with many entries is slow when EnablePartialRendering = true, but it is fast

Hello together,

I have a big performance problem when I use a DropDownList in an UpdatePanel. This is my code:

ASPX-Page:

<asp:ScriptManager ID="smMain" runat="server" EnablePartialRendering="true">
</asp:ScriptManager>
<asp:UpdatePanel ID="upPartial" runat="server">
<ContentTemplate>
<asp:DropDownList ID="ddlList" runat="server" />
<asp:Button ID="btnPostBack" runat="server" Text="PostBack" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="progress" runat="server" DisplayAfter="0">
<ProgressTemplate>
Wait Please...
</ProgressTemplate>
</asp:UpdateProgress>

CodeBehind:

protected void Page_Load(object sender, EventArgs e)
{
for (int i = 0; i < 10000; i++)
{
((DropDownList)this.upPartial.FindControl("ddlList")).Items.Add(new ListItem("Value " + i.ToString(), i.ToString()));
}
}

When I click the button on this page it takes about 1 minute to complete the partial postback. But it is a simple postback with no other code to execute. When I set EnablePartialRendering = false in the ScriptManager the same postback executes in about 1 second.

Can somebody tell me what is the problem with the partial postpack?

Thanks and best regards

Gunther

Hi Gunther,

Well this is an issue that i have seen before on this forum. As far as i know you can't fix this when you take a look at the Ajax framwork. I think that a dropdownlist with 10000 rows isn't a very user friendly dropdownlist. Why are you putting so much items in 1 dropdownlist? Isn't possible to filter some of the items by the selection that a user can make in multiple dropdownlist. For example. If you have a dropdownlist with 10000 projectteams it could be possible to add a few selections before you select the project team like:

Select a Company

Select a Department

Select a Projectteam

This will filter the project team dropdownlist because you first selected a specific company and department so there are less projectteams left. I hope this helps

Regards,

Gunther,

Its not only the problem with the dropdown list, but also with gridview when i has more nubmer of rows.

when i removed the ajax controls, it worked fine.

sansav_p

Thank you for your answers.

The problem is that we are in a production environment, where I can't seperate the filter into several filters and I really need all the entries in the dropdownlist at the moment.

The thing I can't understand is why the page is fast without partial rendering and very very slow with partial rendering. I think I do nothing special and a solution for this should exist. Perhaps it can be solved with a dropdownlist from another vendor.

I will be happy with every solution or help I can get.

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