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.