I decided to blog this collapsable list after digging it up recently for another project. The idea is very simple and cleans up processing lists that may result in long/unsightly output on a web page. The code is very simple and straight-forward, no AJAX here - just complete client-side management of the list display. I've removed all style references - apply the styles as you see fit. The summary list is printed using a count parameter, therefore the following style string can be handed to it:
ListDrillDown1.DescriptionText = "{0} Processing Errors";
This results in the following style of output:
![]()
Upon clicking the [+] sign, the actual messages are revealed.
![]()
The [-] sign can then be clicked again to hide the content.
Note that the control is coded to allow 1..n instances on a given page. If there aren't any items on the list, nothing is shown on the resulting .aspx page.
Now for the code...
First, we have the HTML for the User Control. Note the use of the server side <DIVs> that enable multiple collapsable list controls per page.
<table>
<tr>
<td>
<div id="fullcontent" style="DISPLAY: none" runat="server"><IMG src="minus.png"></div>
<div id="mincontent" style="DISPLAY: block" runat="server"><IMG src="plus.png"></div>
</td>
<TD>
<asp:Label id="lblDescription" runat="server">Description</asp:Label></TD>
</tr>
</table>
<DIV id="tableContent" style="DISPLAY: none" runat="server">
<asp:Table id="tblList" runat="server"></asp:Table></DIV>
And here is the code-behind...
public class
ListDrillDown : System.Web.UI.UserControl
{
protected
System.Web.UI.WebControls.Label lblDescription;
protected
System.Web.UI.WebControls.Table tblList;
protected
System.Web.UI.HtmlControls.HtmlGenericControl fullcontent;
protected
System.Web.UI.HtmlControls.HtmlGenericControl mincontent;
protected
System.Web.UI.HtmlControls.HtmlGenericControl tableContent;
public string DescriptionText;
private void Page_Load(object
sender, System.EventArgs e)
{
if(
tblList.Rows.Count == 0 )
{
Visible = false;
return;
}
Visible = true;
SetupScript();
lblDescription.Text = string.Format( DescriptionText, tblList.Rows.Count);
fullcontent.Attributes.Add("onclick",
"javascript:ShowContent(false, " + fullcontent.ClientID+",
"+mincontent.ClientID+",
"+tableContent.ClientID+");");
mincontent.Attributes.Add("onclick",
"javascript:ShowContent(true, " + fullcontent.ClientID +",
"+ mincontent.ClientID+",
"+tableContent.ClientID+");");
}
private void SetupScript()
{
if( ! this.Page.IsClientScriptBlockRegistered("ListDrillDown.ascx"))
Page.RegisterClientScriptBlock("ListDrillDown.ascx",
GenerateScript());
}
private string GenerateScript()
{
StringBuilder sb = new StringBuilder();
sb.Append("<SCRIPT
language='javascript'>");
sb.Append("function ShowContent(
show, fullId, minId, tableContentId )");
sb.Append("{");
sb.Append("if( show == true )");
sb.Append("{");
sb.Append("fullId.style.display
='block';");
sb.Append("minId.style.display='none';");
sb.Append("}");
sb.Append("else");
sb.Append("{");
sb.Append("fullId.style.display='none';");
sb.Append("minId.style.display='block';");
sb.Append("}");
sb.Append("tableContentId.style.display =
fullId.style.display;");
sb.Append("}");
sb.Append("</SCRIPT>");
return
sb.ToString();
}
public void AddLine( string
line )
{
TableRow tr = new
TableRow();
TableCell tc = new
TableCell();
tc.Text = line;
tr.Cells.Add( tc);
tblList.Rows.Add( tr );
}
}
I've always wished that ASP.NET would allow for a <SCRIPT> attribute directly in the ASCX file that would allow you to register it as a once/page scriptlet on a web user control. That would certainly beat spewing the script in the page-behind and using the RegisterClientScriptBlock(...) call.
Read: A simple collapsable list user control for list output
Previous Topic
