Click here to Skip to main content
11,577,258 members (61,653 online)
Click here to Skip to main content

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

, 9 Jul 2010 CPOL 33.9K 1.5K 16
Rate this:
Please Sign up or sign in to vote.
Displaying additional or Preview Rows in a gridview for displaying more columns in a Grid View with expand or collapse options

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>       
GridViewExpandCollapseRow_1.jpg

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> 

GridViewExpandCollapseRow_2.jpg

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> 

GridViewExpandCollapseRow_3.jpg

GridViewExpandCollapseRow_4.jpg

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.

License

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

Share

About the Author

Sivastyle
Web Developer
India India
I am a software developer from Chennai, India. From Novemeber 2004, I am in to the .NET Framework and I enjoy writing codes in C#. My experience in .NET Technology includes designing and creating custom controls and application for Web and windows platform.

You may also be interested in...

Comments and Discussions

 
QuestionHow to export this to excel? Pin
Rick.gwu5-Jan-11 6:53
memberRick.gwu5-Jan-11 6:53 
GeneralFirefox will display wierd Pin
secorbett13-Jul-10 3:24
membersecorbett13-Jul-10 3:24 
GeneralRe: Firefox will display wierd Pin
Sivastyle13-Jul-10 8:20
memberSivastyle13-Jul-10 8:20 
GeneralMy vote of 3 Pin
secorbett13-Jul-10 3:23
membersecorbett13-Jul-10 3:23 
GeneralRe: My vote of 3 Pin
Sivastyle13-Jul-10 8:25
memberSivastyle13-Jul-10 8:25 

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 | Terms of Use | Mobile
Web03 | 2.8.150603.1 | Last Updated 10 Jul 2010
Article Copyright 2010 by Sivastyle
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid