Click here to Skip to main content
14,172,361 members
Click here to Skip to main content
Add your own
alternative version


33 bookmarked
Posted 25 Sep 2009
Licenced CPOL

ASP.NET GridView Columns with Collapsible Panel Embedded

, 29 Sep 2009
Rate this:
Please Sign up or sign in to vote.
ASP.NET GridView Columns with Collapsible panel to display additional information without postback
DataGridView_DIVTag - Click to enlarge image

DataGridView_DIVTag - Click to enlarge image


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.


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>"
 	+ "&nbsp;&nbsp;&nbsp;&nbsp;<div id='row" + count + "' class='DivPanel'>"
 	+ "<TABLE cellSpacing='2' cellPadding='2' width='100%' border='0'>"
 	+ "<tr><td class='La_Ma_Text'>&nbsp;</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'>
 	&nbsp;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>";

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.


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


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Padoor Shiras
Web Developer Proteans Software Solutions Pvt Ltd.
India India
Shiras AbdulRahman Currently working with Proteans Software Solutions Bangalore.

Proteans a CAMO group company is an outsourcing company focusing on software product development and business application development on Microsoft Technology Platform. "Committed to consistently deliver high-quality software products and services through continual improvement of our knowledge and practices focused on increased customer satisfaction.

You may also be interested in...

Comments and Discussions

Generalinteresting - have 5 Pin
Pranay Rana4-Jan-11 0:59
professionalPranay Rana4-Jan-11 0:59 
GeneralMy vote of 5 Pin
Bit-Smacker16-Oct-09 9:26
memberBit-Smacker16-Oct-09 9:26 

I needed something flexible and dynamic that allowed me to add different controls and fields to each row, depending on column values or threshold triggers. Now, I can just inject anything into the for loop that builds the datarow!

The data that I'm accessing comes from a mix of SQL and ODBC datasources, which makes binding impossible. I'll need to programmatically break it out into sub-queries and add it within the loop.

Thank you for keeping it flexible, without binding!
GeneralRe: My vote of 5 Pin
Padoor Shiras25-Oct-09 19:23
memberPadoor Shiras25-Oct-09 19:23 
GeneralMy vote of 1 Pin
mambo_229-Sep-09 9:51
membermambo_229-Sep-09 9:51 
GeneralRe: My vote of 1 Pin
Vasanth.S.R30-Sep-09 21:56
memberVasanth.S.R30-Sep-09 21:56 
General[My vote of 1] Dangerous way to embed html in your code.. Pin
erik25629-Sep-09 3:37
membererik25629-Sep-09 3:37 
GeneralRe: [My vote of 1] Dangerous way to embed html in your code.. Pin
Padoor Shiras29-Sep-09 4:13
memberPadoor Shiras29-Sep-09 4:13 
GeneralRe: [My vote of 1] Dangerous way to embed html in your code.. Pin
erik25629-Sep-09 4:44
membererik25629-Sep-09 4:44 
GeneralRe: [My vote of 1] Dangerous way to embed html in your code.. Pin
Padoor Shiras29-Sep-09 5:10
memberPadoor Shiras29-Sep-09 5:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web03 | 2.8.190524.3 | Last Updated 29 Sep 2009
Article Copyright 2009 by Padoor Shiras
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid