Expand and Collapse for Summary/Preview Row in a Grid View

• Download source - 5.83 KB

Introduction

The article is mainly for ASP.NET intermediate programmers, who are looking for a different UI in the Grid View Control. I have written a technique to show more number of columns in a grid using an expandable row. This additional row can also be used as a summary row, whenever you have a large description column to be displayed in grid.

Background

During a project development, I came across a situation where I was in need of showing more columns in a grid, and I could not opt for a third party controls or do research on adding a custom row on the grid, without affecting the exiting pagination and grid view row count, etc... So the solution mentioned in this article is just a shortcut (I felt it in this way. Not sure if there are some other shortcut methods already available somewhere).

Using the Code

Adding Additional/Supporting/Preview Rows in Grid View Technique

Rather than a technique, I will call my article as a display trick in Grid View. This article is about displaying additional Rows with data (such as basic information about the Row) and when someone presses the expand button, I open a new area under the row with more detailed information about the row (display more columns) in a Grid View.

As the result is achieved not by creating a separate row in the Row created event or writing custom grid view control, this can only be considered as a display trick.

The behavior is achieved by just closing the column and row tags at the last visible column and adding a new row i.e. “tr” with id , and binding the columns in this row with existing dataset/data table.

If there is a need to show/hide the last column in your application, based on certain conditions you need to have the same set of controls in the last visible column so that the behavior can be achieved even when the current last column is invisible.

The sample shows only the item template, if you want the similar behavior to be achieved in Edit mode, you need to include the additional “tr” section details in the EditItemTemplate as well.

Steps Involved

Step 1

Bind the data source with the datatable or dataset and provide bound columns or templated columns in your aspx page.

Step 2

Bind the last column of the grid as a template column. In the sample attached, I showed a mixed of bound column and template column. However the Last visible column in the grid should be made template column.

In the Item Template of last column, add the “</td></tr> tags “after binding all your controls. In the sample, I just have a label alone in this column. Then you can add a new Table with specified header columns and related rows in the expand section table.

Properly design the additional row section (or let’s say Summary Row Section). In the example, the summary row section code is as below:

<tr id=”TR_Summary” runat="”server”">
        <td colspan="5">  // ColSpan should be the visible column count of the grid
        <table> <tr>  // I am adding another table with header , 
as this example shows expanding the columns in the next row..
<tr id=”TR_Summary” runat="”server”">
        <td colspan="5">  // ColSpan should be the visible column count of the grid
        <table> <tr>  // I am adding another table with header , 
//as this example shows expanding the columns in the next row..
// if you intend to show summary row add a  
td and bind the summary column to that td(table cell)
            // style similar to the grid header columns
             <td style="background-color:#76AB40; font-weight:bold">    
             Col6</td>
            <td style="background-color:#76AB40; font-weight:bold">
                Col7
            </td>
            <td style="background-color:#76AB40; font-weight:bold">
                Col8
            </td>
        </tr>
            <tr>  //END OF HEADING ROWS IN SUMMARY SECTION.
                 <td></td>   //VALUE COLUMNS
                 <td>
           <asp:Label runat="server" ID="Label1" Text='<%#Eval("Col6")%>' ></asp:Label>
        </td>
        <td>
           <asp:Label runat="server" ID="Label2" Text='<%#Eval("Col7")%>' ></asp:Label>
        </td>
        <td>
           <asp:Label runat="server" ID="Label3" Text='<%#Eval("Col8")%>' ></asp:Label>
           </td></tr></table>
        </td>
        </tr>       

Step 3

Ok! Now you are almost done if you are going to show this summary section always. But, if you intend to show the summary section only if you expand the section by clicking on the +/- button, include an Item Template for the +/- image. (As this column is included later… ensure that you increment the column span in the summary row) .

<ItemTemplate> 

< asp:ImageButton OnClientClick="expandDetailsInGrid(this);return false;" 
runat="server" ID="A_View" ImageUrl="~/plus.gif" /> 
</ItemTemplate> 

Step 4

Now, in order to expand or collapse the additional grid row, in client script, write the logic to show or hide the summary row as shown in the below script:

Javascript of expandDetailsInGrid method is below 
<script type="text/javascript"> 
function expandDetailsInGrid(_this) { 
var id = _this.id; 
var imgelem = document.getElementById(_this.id); 
var currowid = id.replace("A_View", "TR_Summmary") //GETTING THE ID OF SUMMARY ROW 
var rowdetelemid = currowid; 
var rowdetelem = document.getElementById(rowdetelemid); 
if (imgelem.alt == "plus") { 
imgelem.src = “minus.gif" 
imgelem.alt = "minus" 
rowdetelem.style.display = 'block'; 
} 
else { 
imgelem.src = “plus.gif" 
imgelem.alt = "plus" 
rowdetelem.style.display = 'none'; 
} 
return false; 
} 
</script> 

Step 5

By default, you can hide the Summary Row by setting “style="display: none"” for TR_Summary.

That’s it! Now you can expand and view more columns in the grid view.

Conclusion

This is not a Parent – Child Relation grid or Hierarchical Grid. This is just a technique to show more columns in a grid, where you view some of the columns based on need or whenever you are in need of viewing the summary row which contains text for the grid.

Currently, this was tested only in Internet Explorer 8 browser, and this will not work in Gecko based browsers (Mozilla). I will fix that when I get some time. Thanks for reading.

I noticed some related posts in http://forums.asp.net/t/716876.aspx but as my solution is different, I thought of posting my solution as an article.