Click here to Skip to main content
13,598,849 members
Click here to Skip to main content
Add your own
alternative version


103 bookmarked
Posted 2 Feb 2004

ASP.NET Expand/Contract DataGrid

, 14 Apr 2004
Rate this:
Please Sign up or sign in to vote.
ASP.NET Expand/Contract DataGrid that allows you to show/hide details without posting back.


The ASP.NET DataGrid is very powerful and robust. However, some of the things we need it to do require lots of custom code. Denis Bauer's HierarGrid is an example of a very sophisticated datagrid. Unfortunately, my project needed the ability to expand and contract DataGrid columns rather than DataGrid rows, so I implemented the ExDataGrid server control which is described in this article. Much of the code logic was borrowed from HierarGrid.

You can check out the HierarGrid here.

You can also check out a live demo of ExDataGrid here.

Figure 1. Contracted Columns

Figure 2. Expanded Columns

Using the server control

The ExDataGrid server control requires the use of three classes:

  • ExDataGrid - Main server control. This is directly derived from DataGrid and has all functionality of a regular datagrid.
  • ExColumnExpand - Column with a plus and minus image. This control is derived from BoundColumn.
  • ExColumn - Columns that will contract/expand. This control is derived from BoundColumn and has added properties such as DrawBorders, ForeColor, and BackColor.

To associate the ExColumnExpand and ExColumn classes so that they work together, the property ExGroupName must be assigned for each expansion group.


<cc1:ExDataGrid id="DataGridReport1" runat="server" 

             BorderColor="#000066" CellPadding="1" BorderWidth="2px"

    AutoGenerateColumns="False" ShowFooter="True">
    <EditItemStyle ForeColor="Black" BackColor="Yellow"></EditItemStyle>
    <AlternatingItemStyle Font-Size="X-Small" BackColor="Gainsboro">
    <ItemStyle Font-Size="X-Small" Font-Names="Verdana"></ItemStyle>
    <HeaderStyle Font-Bold="True" BackColor="#D7D7D7"></HeaderStyle>
    <FooterStyle Font-Size="Small" BackColor="RoyalBlue"></FooterStyle>
        <asp:BoundColumn DataField="Title_ID" HeaderText="Title_ID" 

        <cc1:ExColumnExpand ExGroupName="TitleExpand"  DataField="Title" 

                         HeaderText="Title" SortExpression="Title" />
        <cc1:ExColumn DataField="Price" ExGroupName="TitleExpand" 

                         HeaderText="Price" SortExpression="Price"

            <ItemStyle BackColor="#396794" ForeColor="white"></ItemStyle>
            <HeaderStyle BackColor="#396794" ForeColor="white"></HeaderStyle>
            <FooterStyle BackColor="#396794" ForeColor="white"></FooterStyle>
        <cc1:ExColumn DataField="Notes"  ExGroupName="TitleExpand" 

                         HeaderText="Notes" SortExpression="Notes" 

            <ItemStyle BackColor="#396794" ForeColor="white"></ItemStyle>
            <HeaderStyle BackColor="#396794" ForeColor="white"></HeaderStyle>
            <FooterStyle BackColor="#396794" ForeColor="white"></FooterStyle>
        </cc1: ExColumn>
        <asp:BoundColumn DataField="Type" 

               HeaderText="Type" SortExpression="Type" />
        <cc1:ExColumnExpand DataField="Publisher" 

                   ExGroupName="PublishExpand" HeaderText="Publisher" 

             SortExpression="Publisher" />
        <cc1:ExColumn DataField="Publication"  ExGroupName="PublishExpand" 

                   HeaderText="Publication Date" 

            SortExpression="Publication" DrawBorders="false">
            <ItemStyle BackColor="#396794" ForeColor="white"></ItemStyle>
        <asp:BoundColumn DataField="Authors" HeaderText="Authors" 

</cc1: ExDataGrid>


This server control was quickly written and has much room for improvement. It does implement the IPostback interface so the state of the control is saved during a sort or any other rebinding of data. Additionally, the control's expand and contract functions run via JavaScript so a postback is not necessary. Please make any suggestions and or improvements as necessary. Let me know how it goes!


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Tony Truong
Architect Frontline Direct Inc., Adconion
United States United States
Tony Truong graduated from UCLA in Spring of 2001 and starting worked at Symantec Corporation as a Software Engineer. After a few years of developing various features for Norton SystemWorks, Tony moved to San Diego. He is currently writing database applications using ASP.NET and C# with the .NET Framework. Tony specializes in tara-byte databases with emphasis on high availability, optimization, and complex entity modeling.

You may also be interested in...

Comments and Discussions

GeneralBest Grid Pin
almagunet16-Jun-05 4:53
memberalmagunet16-Jun-05 4:53 

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.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web03 | 2.8.180621.3 | Last Updated 15 Apr 2004
Article Copyright 2004 by Tony Truong
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid