Click here to Skip to main content
15,887,683 members
Articles / Web Development / ASP.NET
Article

ExtGridView

Rate me:
Please Sign up or sign in to vote.
4.79/5 (68 votes)
5 Dec 2005CPOL2 min read 830.9K   13.6K   214   180
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.)

HTML
<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.

C#
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). Image 2

License

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


Written By
Software Developer
Romania Romania
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
Questionit could be used with VB.net? Pin
OsoPolar21-Aug-06 23:42
OsoPolar21-Aug-06 23:42 
AnswerRe: it could be used with VB.net? Pin
Roger Alsing13-Sep-06 0:15
Roger Alsing13-Sep-06 0:15 
GeneralGood Stuff but one problem with Last Column Pin
chacimulch11-Aug-06 3:25
chacimulch11-Aug-06 3:25 
GeneralRe: Good Stuff but one problem with Last Column Pin
j3ffb14-Aug-06 8:14
j3ffb14-Aug-06 8:14 
GeneralRe: Good Stuff but one problem with Last Column Pin
chacimulch24-Aug-06 8:42
chacimulch24-Aug-06 8:42 
GeneralModified for zero code Pin
j3ffb10-Aug-06 2:05
j3ffb10-Aug-06 2:05 
Generalthe images to expand/collapse doesn't appear Pin
mateusescudero12-Jul-06 17:10
mateusescudero12-Jul-06 17:10 
GeneralRe: the images to expand/collapse doesn't appear Pin
Andrei Bozantan20-Jul-06 7:13
Andrei Bozantan20-Jul-06 7:13 
Questionweb form style sheet doesn't work Pin
Nini9910-Jul-06 12:15
Nini9910-Jul-06 12:15 
GeneralCollapse/Expand all with Javascript (for GridView) [modified] Pin
bpierron30-Jun-06 3:49
bpierron30-Jun-06 3:49 
GeneralRe: Collapse/Expand all with Javascript (for GridView) Pin
Tong Chen @ Seattle19-Sep-06 8:26
Tong Chen @ Seattle19-Sep-06 8:26 
GeneralRe: Collapse/Expand all with Javascript (for GridView) Pin
P.J.P23-Feb-10 0:01
P.J.P23-Feb-10 0:01 
QuestionHow to fire the event of the child grid Pin
aamir60pk15-May-06 18:35
aamir60pk15-May-06 18:35 
GeneralNicely done Pin
erayit18-Apr-06 6:42
erayit18-Apr-06 6:42 
GeneralRe: Nicely done Pin
pete999999994-Jun-07 1:10
pete999999994-Jun-07 1:10 
QuestionWhat is the licence of this component? Pin
Michael_leung17-Apr-06 17:33
Michael_leung17-Apr-06 17:33 
AnswerRe: What is the licence of this component? Pin
Andrei Bozantan20-Apr-06 2:48
Andrei Bozantan20-Apr-06 2:48 
JokeDaca-ti dau o Karata in nas! Pin
Sergiu Barbu17-Apr-06 15:24
Sergiu Barbu17-Apr-06 15:24 
JokeRe: Daca-ti dau o Karata in nas! Pin
Sergiu Barbu17-Apr-06 15:36
Sergiu Barbu17-Apr-06 15:36 
JokeRe: Daca-ti dau o Karata in nas! Pin
Andrei Bozantan20-Apr-06 2:52
Andrei Bozantan20-Apr-06 2:52 
QuestionCannot run the demo ! Pin
bborac30-Mar-06 6:27
bborac30-Mar-06 6:27 
GeneralGood job Pin
ashushere20-Mar-06 10:27
ashushere20-Mar-06 10:27 
GeneralEditing, sorting nested grid Pin
gaurimm9-Feb-06 23:16
gaurimm9-Feb-06 23:16 
GeneralDataGrid Pin
adeadeadeade26-Jan-06 7:29
adeadeadeade26-Jan-06 7:29 
GeneralRe: DataGrid Pin
Andrei Bozantan26-Jan-06 20:41
Andrei Bozantan26-Jan-06 20:41 

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.