Click here to Skip to main content
Click here to Skip to main content

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

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>"
 	+ "&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>";
 
 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.

License

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

Share

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.

Comments and Discussions

 
Generalinteresting - have 5 PinmemberPranay Rana4-Jan-11 0:59 
GeneralMy vote of 5 PinmemberBit-Smacker16-Oct-09 9:26 
GeneralRe: My vote of 5 PinmemberPadoor Shiras25-Oct-09 19:23 
GeneralMy vote of 1 Pinmembermambo_229-Sep-09 9:51 
GeneralRe: My vote of 1 PinmemberVasanth.S.R30-Sep-09 21:56 
General[My vote of 1] Dangerous way to embed html in your code.. Pinmembererik25629-Sep-09 3:37 
GeneralRe: [My vote of 1] Dangerous way to embed html in your code.. PinmemberPadoor Shiras29-Sep-09 4:13 
GeneralRe: [My vote of 1] Dangerous way to embed html in your code.. Pinmembererik25629-Sep-09 4:44 
GeneralRe: [My vote of 1] Dangerous way to embed html in your code.. PinmemberPadoor Shiras29-Sep-09 5:10 

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.140814.1 | Last Updated 29 Sep 2009
Article Copyright 2009 by Padoor Shiras
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid