Click here to Skip to main content
15,392,679 members
Articles / Web Development / ASP.NET
Posted 2 Feb 2004


103 bookmarked

ASP.NET Expand/Contract DataGrid

Rate me:
Please Sign up or sign in to vote.
4.38/5 (41 votes)
14 Apr 20041 min read
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.

Image 1

Figure 1. Contracted Columns

Image 2

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.

Comments and Discussions

Questionexdatagrid pagination Pin
jeyamothi2-Jun-13 21:35
Memberjeyamothi2-Jun-13 21:35 
QuestionGetting an error: javascript function ToggleExpand not found Pin
Member 834247023-May-12 20:08
MemberMember 834247023-May-12 20:08 
QuestionExdatagrid in Ajax update panel - Reg Pin
srivinayl5-Aug-11 19:36
Membersrivinayl5-Aug-11 19:36 
GeneralGood One Pin
Anurag Gandhi27-Oct-10 23:10
professionalAnurag Gandhi27-Oct-10 23:10 
GeneralPlsss help me with the aspx.cs code Pin
Member 447242625-Apr-10 7:00
MemberMember 447242625-Apr-10 7:00 
Questionreg exporting to excel Pin
Coder.8613-Jun-06 18:31
MemberCoder.8613-Jun-06 18:31 
AnswerRe: reg exporting to excel Pin
eric.lacourse13-Jun-06 20:05
Membereric.lacourse13-Jun-06 20:05 
GeneralRe: reg exporting to excel Pin
Coder.8614-Jun-06 23:34
MemberCoder.8614-Jun-06 23:34 
GeneralCollapse/Expand icon Pin
Rom200012-Jan-06 0:33
MemberRom200012-Jan-06 0:33 
GeneralBest Grid Pin
almagunet16-Jun-05 4:53
Memberalmagunet16-Jun-05 4:53 
QuestionAlternatingItemStyle property? Pin
mcclar22-Oct-04 2:56
Membermcclar22-Oct-04 2:56 
GeneralFormatting data in columns Pin
Anonymous12-Sep-04 22:58
MemberAnonymous12-Sep-04 22:58 
GeneralRe: Formatting data in columns Pin
Anonymous14-Sep-04 0:46
MemberAnonymous14-Sep-04 0:46 
GeneralConfusing Error Pin
Imhoteph12-Jun-04 3:42
MemberImhoteph12-Jun-04 3:42 
GeneralRe: Confusing Error Pin
Tony Truong17-Jun-04 12:50
MemberTony Truong17-Jun-04 12:50 
QuestionOnly on IE? Pin
Anonymous27-May-04 11:05
MemberAnonymous27-May-04 11:05 
GeneralEditing within the expanded grid Pin
mick_lennon19-May-04 4:37
Membermick_lennon19-May-04 4:37 
GeneralRe: Editing within the expanded grid Pin
kraftspl21-May-04 0:14
Memberkraftspl21-May-04 0:14 
GeneralRe: Editing within the expanded grid Pin
mick_lennon21-May-04 22:48
Membermick_lennon21-May-04 22:48 
GeneralOnline test Pin
kraftspl6-May-04 11:20
Memberkraftspl6-May-04 11:20 
GeneralRe: Online test Pin
Tony Truong6-May-04 11:32
MemberTony Truong6-May-04 11:32 
QuestionRe: Online test Pin
Libin Chen18-Jun-07 18:36
MemberLibin Chen18-Jun-07 18:36 
GeneralFounded a little bug... Pin
ataru24-Feb-04 2:48
Memberataru24-Feb-04 2:48 
GeneralRe: Founded a little bug... Pin
Tony Truong13-Apr-04 12:09
MemberTony Truong13-Apr-04 12:09 
GeneralRe: Founded a little bug... Pin
sinjiy21-Apr-04 7:55
Membersinjiy21-Apr-04 7:55 

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.