Click here to Skip to main content
Click here to Skip to main content

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.

Introduction

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.

Example:

<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">
    </AlternatingItemStyle>
    <ItemStyle Font-Size="X-Small" Font-Names="Verdana"></ItemStyle>
    <HeaderStyle Font-Bold="True" BackColor="#D7D7D7"></HeaderStyle>
    <FooterStyle Font-Size="Small" BackColor="RoyalBlue"></FooterStyle>
    <Columns>
        <asp:BoundColumn DataField="Title_ID" HeaderText="Title_ID" 
                         SortExpression="Title_ID"></asp:BoundColumn>
        <cc1:ExColumnExpand ExGroupName="TitleExpand"  DataField="Title" 
                         HeaderText="Title" SortExpression="Title" />
        <cc1:ExColumn DataField="Price" ExGroupName="TitleExpand" 
                         HeaderText="Price" SortExpression="Price"
            DrawBorders="true">
            <ItemStyle BackColor="#396794" ForeColor="white"></ItemStyle>
            <HeaderStyle BackColor="#396794" ForeColor="white"></HeaderStyle>
            <FooterStyle BackColor="#396794" ForeColor="white"></FooterStyle>
        </cc1:ExColumn>
        <cc1:ExColumn DataField="Notes"  ExGroupName="TitleExpand" 
                         HeaderText="Notes" SortExpression="Notes" 
             DrawBorders="true">
            <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>
        </cc1:ExColumn>
        <asp:BoundColumn DataField="Authors" HeaderText="Authors" 
                   SortExpression="Authors"></asp:BoundColumn>
    </Columns>
</cc1: ExDataGrid>

Conclusion

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!

License

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

Share

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 Pinmemberjeyamothi2-Jun-13 21:35 
QuestionGetting an error: javascript function ToggleExpand not found PinmemberMember 834247023-May-12 20:08 
QuestionExdatagrid in Ajax update panel - Reg Pinmembersrivinayl5-Aug-11 19:36 
GeneralGood One PinmemberAnurag Gandhi27-Oct-10 23:10 
GeneralPlsss help me with the aspx.cs code PinmemberMember 447242625-Apr-10 7:00 
Questionreg exporting to excel Pinmembercsivakumar13-Jun-06 18:31 
AnswerRe: reg exporting to excel Pinmembereric.lacourse13-Jun-06 20:05 
GeneralRe: reg exporting to excel Pinmembercsivakumar14-Jun-06 23:34 
GeneralCollapse/Expand icon PinmemberRom200012-Jan-06 0:33 
GeneralBest Grid Pinmemberalmagunet16-Jun-05 4:53 
QuestionAlternatingItemStyle property? Pinsussmcclar22-Oct-04 2:56 
GeneralFormatting data in columns PinsussAnonymous12-Sep-04 22:58 
GeneralRe: Formatting data in columns PinsussAnonymous14-Sep-04 0:46 
GeneralConfusing Error PinmemberImhoteph12-Jun-04 3:42 
GeneralRe: Confusing Error PinmemberTony Truong17-Jun-04 12:50 
QuestionOnly on IE? PinsussAnonymous27-May-04 11:05 
GeneralEditing within the expanded grid Pinmembermick_lennon19-May-04 4:37 
GeneralRe: Editing within the expanded grid Pinmemberkraftspl21-May-04 0:14 
GeneralRe: Editing within the expanded grid Pinmembermick_lennon21-May-04 22:48 
GeneralOnline test Pinmemberkraftspl6-May-04 11:20 
GeneralRe: Online test PinmemberTony Truong6-May-04 11:32 
QuestionRe: Online test PinmemberLouisa Chen18-Jun-07 18:36 
GeneralFounded a little bug... Pinmemberataru24-Feb-04 2:48 
GeneralRe: Founded a little bug... PinmemberTony Truong13-Apr-04 12:09 
GeneralRe: Founded a little bug... Pinmembersinjiy21-Apr-04 7:55 

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
Web02 | 2.8.141030.1 | Last Updated 15 Apr 2004
Article Copyright 2004 by Tony Truong
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid