ASP.NET GridView Columns with Collapsible Panel Embedded

• Download source - 6.07 KB

Introduction

My job has required me to read quite a bit of code written by other people, and over the years I've found that there are some problems pertaining to gridview in showing up huge data. It's possible to have many columns in a gridview to display the unwanted and wanted columns with horizontal scrollbars. There may be situations where we will need to display only a few columns and if required, we will have to give detailed information. In this article, I will explain how to have a collapsible panel in a column of ASP.NET GridView. This article will help the readers to learn about integration of collapsible panel in GridView columns.

Background

In my example above, I have attached two images which will explain all about this article. I have two columns displayed in ASP.NET gridview. Both the column values are from SQL SERVER 2005 database. Screen1 is how the screen will look like on page load. The first column in the grid is a readonly column. The second column in the grid is link column to which the Collapsible panel is integrated. When the user hovers over the text in the second column, the mouse icon is changed to handtool and onClick the panel expands to show information either from the database or hardcoded text. The expansion and collision of the text is pure client side.

Using the Code

Here in this example, I am trying to create two datacolumns and add it to a datatable. I will fill in the datacolumns from the filled in dataset. Any user who uses this code can create the table and use the insert scripts provided in the zip file to test this application or else have your technology for getting the data. After getting the data, now its our turn to fill in the datacolumns. To fill in the datacolumns, I will iterate through the datarows of the datatable. As I mentioned earlier, we have two columns in the datagrid. I am filling the first column with the text which is returned from the database. I am attaching a collapsible panel to the second column.

function toggleLayer(whichLayer)
{
if (document.getElementById)
{
var style2 = document.getElementById(whichLayer).style;
style2.display = style2.display? "":"block";
}

Now let me tell you how to add the collapsible panel. It's just a simple div tag added along with a JavaScript function named toggleLayer in an anchor tag. As the C# code contains HTML tags, I am unable to show the code here. toggleLayer is JavaScript function which takes the rowId as the parameter and displays or hides the respective panel. As the Div tag is created dynamically inside a foreach loop, each div tag will have its own uniqueId across the page.

foreach (DataRow dr in ds.Tables[0].Rows)
{
  myDr = dt.NewRow();
  myDr[0] = dr[0].ToString();

  myDr[1] = "<a href=\"javascript:toggleLayer('row" + count 
  	+ "');\" class=DivPanelTextBold>" + dr["SubModule"].ToString() + "</a>"
 	+ "    <div id='row" + count + "' class='DivPanel'>"
 	+ "<TABLE cellSpacing='2' cellPadding='2' width='100%' border='0'>"
 	+ "<tr><td class='La_Ma_Text'> </td><
 	td align=right><a href=\"javascript:toggleLayer('row" + count 
 	+ "');\" class=La_Ma_Link><img src='Close.gif' 
 	border=0 align='absmiddle'></a></td></tr>";

 myDr[1] = myDr[1] + "<tr><td class='DivPanelText' width='158px'>
 	 Cell Value: </td><td class='DivPanelText' width='152px'>
 	" + dr["SubModule"].ToString() + "</td></tr>";

 myDr[1] = myDr[1] + "<tr><td><b> Something </b></td></tr>";
 myDr[1] = myDr[1] + "</TABLE>" + "</div><br>";
 
 dt.Rows.Add(myDr);
 count++;
}

In the above foreach loop, we are iterating through each table row and creating a new datarow and append data to it. As usual to the first column, I am attaching whatever is retrieved from the database. To the Second column, myDr[1], I am assigning an anchor tag as well as div tag with unique Id for each div tag created. When the grid is bound to the page, when the user clicks on any of the links available in the second column, it calls toggleLayer (explained above) JavaScript function and passes the rowId. So if the div tag was in collapsed state, it will expand to show the details or else it will collapse. Likewise, we can have any kind of HTML embedded to any number of columns.

Points of Interest

This is a very simple technique which can help developers to have the best UI.
toggleLayer: JavaScript function to display or hide respective div tag.

History 

This is my initial version. Please email me for any doubts related to this article or post your question in the discussion forum below.