Click here to Skip to main content
15,346,368 members
Articles / Web Development / XHTML
Posted 6 May 2008


102 bookmarked

Expanding / Collapsing GridView Rows

Rate me:
Please Sign up or sign in to vote.
4.69/5 (52 votes)
15 May 2008CPOL1 min read
This article describes how to expand and collapse rows of a GridView using JavaScript.



This article presents expand/collapse functionality for GridView rows using JavaScript. To demonstrate this functionality, I’ve used an Image on the GridView header. Rows of the GridView will expand and collapse on successive clicks on this Image.

Using the HTML code

Add a TemplateField inside the GridView and put an Image in the HeaderTemplate of the TemplateField. The HTML code for the GridView will look like this:

<asp:GridView ID="gvTab" BackColor="WhiteSmoke" runat="server" 
     AutoGenerateColumns="False" GridLines="Vertical" ShowFooter="True">
         <HeaderStyle Width="25px" />
         <ItemStyle Width="25px" BackColor="White" />
            <asp:Image ID="imgTab" onclick="javascript:Toggle(this);" 
                 runat="server" ImageUrl="~/minus.gif" ToolTip="Collapse" />
      <asp:BoundField HeaderText="n" DataField="n">
         <HeaderStyle Width="25px" />
         <ItemStyle Width="25px" />
      <asp:BoundField HeaderText="sqrt(n)" DataField="sqrtn">
         <HeaderStyle Width="150px" />
         <ItemStyle Width="150px" />
      <asp:BoundField HeaderText="qbrt(n)" DataField="qbrtn">
         <HeaderStyle Width="150px" />
         <ItemStyle Width="150px" />
   <HeaderStyle Height="25px" Font-Bold="True" BackColor="DimGray" 
                ForeColor="White" HorizontalAlign="Center"
                VerticalAlign="Middle" />
   <RowStyle Height="25px" BackColor="Gainsboro" 
             HorizontalAlign="Center" VerticalAlign="Middle" />
   <AlternatingRowStyle Height="25px" BackColor="LightGray" 
             HorizontalAlign="Center" VerticalAlign="Middle" />
   <FooterStyle BackColor="Gray" />

Attach an onclick event to the GridView header’s Image.

<asp:Image ID="imgTab" onclick="javascript:Toggle(this);" runat="server" 
           ImageUrl="~/minus.gif" ToolTip="Collapse" />

Using the JavaScript code

Put the following code in the script tag:

<script type="text/javascript">
 var Grid = null;
 var UpperBound = 0;
 var LowerBound = 1;
 var CollapseImage = 'minus.gif';
 var ExpandImage = 'plus.gif';
 var IsExpanded = true;   
 var Rows = null;
 var n = 1;
 var TimeSpan = 25;
 window.onload = function()
    Grid = document.getElementById('<%= this.gvTab.ClientID %>');
    UpperBound = parseInt('<%= this.gvTab.Rows.Count %>');
    Rows = Grid.getElementsByTagName('tr');
 function Toggle(Image)
 function ToggleImage(Image)
       Image.src = ExpandImage;
       Image.title = 'Expand';
       Grid.rules = 'none';
       n = LowerBound;
       IsExpanded = false;
       Image.src = CollapseImage;
       Image.title = 'Collapse';
       Grid.rules = 'cols';
       n = UpperBound;
       IsExpanded = true;
 function ToggleRows()
    if (n < LowerBound || n > UpperBound)  return;
    Rows[n].style.display = Rows[n].style.display == '' ? 'none' : '';
    if(IsExpanded) n--; else n++;

In the above code, global variables have been initialized in the window.onload event. There are three methods: Toggle, ToggleImage, and ToggleImage. The Toggle method is invoked on successive clicks on the header Image. This method first toggles the header image and then toggles the rows of the GridView by invoking the ToggleImage and ToggleImage methods. Note that the ToggleRows method is invoked here recursively, using the setTimeout method. I’ve invoked it recursively here in order to create a dynamic effect during the expanding/collapsing of the GridView rows.

In order to make a delay in each recursion, each call to the ToggleRows method has been delayed for 25 milliseconds. You can change it by altering the TimeSpan value depending on your needs.


In this article, I've used the setTimeout method in order to achieve a smooth expand/collapse functionality.

I have tested this script on the following browsers:



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


About the Author

Technical Lead Infogain India Pvt Ltd
India India

Samir NIGAM is a Microsoft Certified Professional. He is an insightful IT professional with results-driven comprehensive technical skill having rich, hands-on work experience n web-based applications using ASP.NET, C#, AJAX, Web Service, WCF, jQuery, Microsoft Enterprise Library , LINQ, MS Entity Framework, nHibernate, MS SQL Server & SSRS.

He has earned his master degree (MCA) from U.P. Technical University, Lucknow, INDIA, his post graduate dipoma (PGDCA ) from Institute of Engineering and Rural Technology, Allahabad, INDIA and his bachelor degree (BSc - Mathematics) from University of Allahabad, Allahabad, INDIA.

He has good knowledge of Object Oriented Programming, n-Tier Architecture, SOLID Principle, and Algorithm Analysis & Design as well as good command over cross-browser client side programming using JavaScript & jQuery,.


Comments and Discussions

GeneralMy vote of 5 Pin
Member 1011252325-Jun-13 15:14
MemberMember 1011252325-Jun-13 15:14 
QuestionNeed Some Clarifications Pin
CSR896-Jun-13 20:12
MemberCSR896-Jun-13 20:12 
QuestionGood work... but one doubt Pin
Anu Palavila13-Oct-11 22:49
MemberAnu Palavila13-Oct-11 22:49 
AnswerRe: Good work... but one doubt Pin
Member 1011252325-Jun-13 15:13
MemberMember 1011252325-Jun-13 15:13 
GeneralGreat wok but i have a question. Pin
MK87_200831-May-11 4:18
MemberMK87_200831-May-11 4:18 
GeneralMy vote of 5 Pin
Marcio_Coelho1-Feb-11 8:20
MemberMarcio_Coelho1-Feb-11 8:20 
GeneralMy vote of 5 Pin
Sandesh M Patil31-Jan-11 22:05
MemberSandesh M Patil31-Jan-11 22:05 
GeneralRe: Grid is null or not an object Pin
Samir NIGAM5-Jul-09 23:08
MemberSamir NIGAM5-Jul-09 23:08 
GeneralExpanding / Collapsing GridView Rows placed in another grid Pin
kurapati's21-May-09 19:09
Memberkurapati's21-May-09 19:09 
QuestionHow about with a regular HTML table? Pin
afenn21-May-09 11:27
Memberafenn21-May-09 11:27 
Questionhow to make one column expand/collapse keeping other one fixed in gridview? Pin
Member 215679126-Jan-09 12:40
MemberMember 215679126-Jan-09 12:40 
GeneralMaintain State of GridView on PostBack Pin
timchimento8-Dec-08 6:24
Membertimchimento8-Dec-08 6:24 
QuestionNice work. Pin
Member 45768475-Oct-08 5:10
MemberMember 45768475-Oct-08 5:10 
GeneralGood Job Pin
proark22-Sep-08 22:46
Memberproark22-Sep-08 22:46 
QuestionHow we make this grid nested Pin
Rehan Hussain13-Jun-08 1:22
MemberRehan Hussain13-Jun-08 1:22 
GeneralCollapsing the rows Pin
Indranil Paul11-Jun-08 21:03
MemberIndranil Paul11-Jun-08 21:03 
GeneralRe: Collapsing the rows Pin
Samir NIGAM11-Jun-08 21:15
MemberSamir NIGAM11-Jun-08 21:15 
QuestionGridLines getting washed out on first expand !!!! Pin
Prash28-May-08 0:34
MemberPrash28-May-08 0:34 
AnswerRe: GridLines getting washed out on first expand !!!! Pin
Samir NIGAM28-May-08 18:43
MemberSamir NIGAM28-May-08 18:43 
GeneralNice One Pin
Veera V Satya N Kanithi19-May-08 6:00
MemberVeera V Satya N Kanithi19-May-08 6:00 
GeneralRe: Nice One Pin
Samir NIGAM19-May-08 18:05
MemberSamir NIGAM19-May-08 18:05 
GeneralNice and simple implementation Pin
Antony M Kancidrowski15-May-08 0:35
MemberAntony M Kancidrowski15-May-08 0:35 
GeneralRe: Nice and simple implementation Pin
Samir NIGAM15-May-08 2:06
MemberSamir NIGAM15-May-08 2:06 
Generalthanxxxxx Pin
snopbear13-May-08 3:44
Membersnopbear13-May-08 3:44 
GeneralRe: thanxxxxx Pin
Samir NIGAM13-May-08 17:45
MemberSamir NIGAM13-May-08 17:45 

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.