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

ExtGridView

, 5 Dec 2005 CPOL
Rate this:
Please Sign up or sign in to vote.
A control which displays hierarchical data using the ASP.NET DataGrid or GridView control.

ExtGridView in action!

Introduction

This article presents a control which displays hierarchical data using the ASP.NET GridView control. This extension of the GridView control can also be used to display extended data details for a data row.

Using the code

The ExtGridView control can be used just like the regular ASP.NET GridView control (since it's inherited from GridView). The ExtGridView control will take care to displaying the expand/collapse button and also shows or hides the nested content.

But how should the nested content be added to the grid? The idea is simple. Because each row can have some related nested content, the ExtGridView control assumes that this content is placed in the last column of the grid. So the content from the last column will not be displayed as a regular column in the grid, but rather as the content which is displayed when the expand button is clicked.

In the sample project, the Customers table from the Northwind database is displayed using the ExtGridView control. The customer's orders are displayed in another ExtGridView as nested content. Finally, the Order details are displayed as nested content for the rows in the Orders grid. If it's necessary, when running the sample project, please modify the connection string in web.config.

Please notice that instead of the grid from the last column, you can place any other ASP.NET control (or HTML code) inside the ItemTemplate and the control will be displayed as nested content.

Points of Interest

Customizing the expand/collapse button's appearance

The ExtGridView control defines the following properties that can be used to customize the expand/collapse button appearance:

  • ExpandButtonCssClass - specifies the CSS class name that is used for the expand button.
  • CollapseButtonCssClass - specifies the CSS class name that is used for the collapse button.
  • ExpandButtonText - specifies the text for the expand button (default value is "+").
  • CollapseButtonText - specifies the text for the collapse button (default value is "-").

Note that you can specify HTML code as values for the ExpandButtonText and the CollapseButtonText properties. (This can be used as a workaround for the 'anchors with the background image flickering' bug in IE.)

<cc:ExtGridView runat="server" id="grid1" 
  ExpandButtonText="<img src='Images/expand.gif' alt='+' border='0' />" 
  CollapseButtonText="<img src='Images/collapse.gif' alt='-' border='0' />" ...

Hiding the expand/collapse button

Each row in the ExtGridView is actually an instance of the ExtGridViewRow class. So any object of type GridViewRow that is a row in an ExtGridView control can be converted to ExtGridViewRow. So, when you want to hide the expand/collapse button for a row in the ExtGridViewRow control, first convert the GridRow object to ExtGridViewRow and then you can use the ShowExpand property to specify if the expand/collapse button is visible or not.

ExtGridViewRow row = grid.Rows[0] as ExtGridViewRow;
row.ShowExpand = false;

History

  • 2005-11-21 - First version release.
  • 2005-11-24 - Updated the expand/collapse button's behavior.
  • 2005-11-28 - Added the ExtDataGrid control which is supported by .NET 1.x.
  • 2005-12-05 - Added a sample project for using the ExtDataGrid control (.NET 1.1).

License

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

Share

About the Author

Andrei Bozantan
Software Developer
Romania Romania
No Biography provided

Comments and Discussions

 
Questionhow to create facebook like post and comment box in asp.net Pinmembersafal.78614-Aug-14 10:06 
GeneralMy vote of 5 PinmemberJustin Clarke28-Jan-11 4:43 
GeneralExpand All / Collapse All Feature [modified] PinmemberJustin Clarke28-Jan-11 3:05 
Generalexpand grid row to show usercontrol page when a row is expanded Pinmemberrocky8111-Sep-10 6:06 
GeneralError: tbl.rows is undefined Pinmemberbertvaes29-Dec-09 9:14 
GeneralRe: Error: tbl.rows is undefined Pinmemberbertvaes29-Dec-09 22:48 
QuestionAnyway to preform a postback when clicking the expand button? Pinmemberjoekelly26-Dec-09 7:24 
AnswerRe: Anyway to preform a postback when clicking the expand button? PinmemberAndrei Bozantan27-Dec-09 5:34 
GeneralRe: Anyway to preform a postback when clicking the expand button? [modified] Pinmemberjoekelly27-Dec-09 11:15 
QuestionNeed one more level down Pinmembersunny3520-Jul-09 18:37 
AnswerRe: Need one more level down PinmemberAndrei Bozantan21-Jul-09 1:11 
GeneralRe: Need one more level down Pinmembersunny3521-Jul-09 15:38 
Generalerror binding data to a label in second level grid.. Pinmemberranisagar7-Jul-09 5:59 
GeneralEvents in the child grid are not firing Pinmemberranisagar5-Jul-09 22:24 
GeneralRe: Events in the child grid are not firing PinmemberAndrei Bozantan5-Jul-09 23:57 
GeneralRe: Events in the child grid are not firing Pinmemberranisagar7-Jul-09 5:13 
GeneralRe: Events in the child grid are not firing Pinmemberramh0819-Jul-09 21:45 
GeneralRe: Events in the child grid are not firing PinmemberAndrei Bozantan19-Jul-09 23:47 
GeneralGridView Doesn't retain it's Data After PostBack.. Pinmemberchudhary.faisal1-Jul-09 6:08 
GeneralBig Problem! Add Edit/select command in ExtGridView not working!!! Pinmemberwyanshan8-Apr-09 20:01 
Generalfisrt level grid for first row is missing when clicking on expand/collapse all Pinmembervidyas19826-Feb-09 3:24 
Questionexpand/collapse button hide PinmemberirfanMalvi67835-Dec-08 22:53 
Generalexpand/collapse button hide PinmemberirfanMalvi67835-Dec-08 19:01 
GeneralSorting the grid(critical requirement and help will be appriciated Pinmembervidyas198224-Nov-08 5:15 
GeneralRe: Sorting the grid(critical requirement and help will be appriciated PinmemberAndrei Bozantan24-Nov-08 5:55 
GeneralRe: Sorting the grid(critical requirement and help will be appriciated Pinmembervidyas198224-Nov-08 17:31 
GeneralRowDarabound event is not fairing in nested gridview [modified] Pinmemberkalyan_nekkanti31-Aug-08 21:23 
GeneralRe: RowDarabound event is not fairing in nested gridview Pinmemberkalyan_nekkanti31-Aug-08 22:03 
GeneralExpand grid - how to retain screen position when it starts to scroll PinmemberSteve Calkin10-Jul-08 21:58 
GeneralRe: Expand grid - how to retain screen position when it starts to scroll Pinmemberfilmstarr24-Oct-08 1:08 
GeneralRe: Expand grid - how to retain screen position when it starts to scroll Pinmemberinihccez12326-Nov-08 10:16 
GeneralRe: Expand grid - how to retain screen position when it starts to scroll PinmemberSteve Calkin4-Mar-09 3:44 
GeneralBy default expand/collapse is turned off PinmemberRalph Willgoss5-Jun-08 4:36 
GeneralRe: By default expand/collapse is turned off PinmemberSteve Calkin11-Jun-08 0:25 
GeneralRe: By default expand/collapse is turned off PinmemberSteve Calkin12-Jun-08 5:34 
GeneralRe: By default expand/collapse is turned off PinmemberRalph Willgoss20-Jun-08 20:00 
GeneralRe: By default expand/collapse is turned off PinmemberSteve Calkin26-Jun-08 3:56 
AnswerRe: By default expand/collapse is turned off PinmemberSteve Calkin4-Mar-09 3:43 
GeneralTestGridControl - Invalid object name:Customers PinmemberEkjon12-May-08 9:20 
QuestionFiltering option? PinmemberDSPINNEY11-Apr-08 12:46 
QuestionSORT option? Pinmemberherascu24-Mar-08 13:44 
GeneralError is thrown as 'ExtGridView' is not a known element. Pinmembersenthil kumarKR23-Jan-08 1:28 
GeneralCannot see Expand Button Pinmembershetty7731-Oct-07 6:43 
GeneralSortable GridViewTree PinmemberJim Brooks20-Oct-07 9:57 
GeneralAjax compliancy PinmemberDaniele Alberto Galliano4-Oct-07 6:05 
GeneralThanks Pinmemberazzys_lounge24-Sep-07 13:12 
GeneralUnspecified Javascript Error Pinmemberpete9999999920-Sep-07 4:14 
GeneralAJAX Accordion Effects on Row Expand PinmemberAL268883-Sep-07 1:46 
Generalusing this control Pinmembersmokie_30-Aug-07 23:59 
QuestionHow about an Expand/Collapse all function Pinmembervonhaupt1-Aug-07 8:52 

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
Web04 | 2.8.150414.1 | Last Updated 5 Dec 2005
Article Copyright 2005 by Andrei Bozantan
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid