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
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.
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
toggleLayer in an anchor tag. As the C# code contains HTML tags, I am unable to show the code here.
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.Rows)
myDr = dt.NewRow();
myDr = dr.ToString();
+ "');\" 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><
+ "');\" class=La_Ma_Link><img src='Close.gif'
myDr = myDr + "<tr><td class='DivPanelText' width='158px'>
Cell Value: </td><td class='DivPanelText' width='152px'>
" + dr["SubModule"].ToString() + "</td></tr>";
myDr = myDr + "<tr><td><b> Something </b></td></tr>";
myDr = myDr + "</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, 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
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.
This is my initial version. Please email me for any doubts related to this article or post your question in the discussion forum below.