Wednesday, 9 August 2006

Expandable gridview


Been working on a project where I needed a grid which could have rows that expand with another grid within it for more details. I found this cool gridview over at The Code Project.

This control is great, it does exactly what it says and all credit to its authors. However I couldn't resist having a tinker with it :-) I have ended up amending it slightly.

The part I wanted to improve was where the client had to handle the RowCreated event, in order to bind any data to the child control in the item template and you had to set whether the row should expand or not. I just felt this could be encapsulated more by being handled internally by the control.

I set about solving this by adding the following extra properties to the control. These properties are designed around the nested object being another gridview, or expandable gridview, with some relationship between the two:

  • NestedGridName (string) - The name of a gridview which is nested.

  • NestedGridDataHandlerName (string) - The name of a datahandler object that is used to retrieve data for the nested grid, this maybe a TableAdapter or custom dataobject.

  • NestedGridDataHandlerMethodName (string) - The name of the method used to extract data on the data handler object.

  • NestedGridDataHandlerSingleton (bool) - Whether the data handler object is a singleton.

  • NestedGridDataHandlerInstanceProperty (string) - If the data handler is a singleton then this field must be set with the name of the property to access the instance.

  • NestedGridForeignDataKeyNames (string[]) - An array of foreign key column names on the containing grid used to reference the nested table.

  • ExpandCollapseCellPosition (int) - The position to add the cell which contains the Expand/Collapse button.

With these extra properties I was able to use reflection to call the data handler for the nested grid, get the data and bind it. I could also determine whether the row needed to be expanded. I also added the CellPosition so that the position of the expand/collapse button can be set and not always at the 0 position.

now you can use the control by dragging it onto the page, setting a few more properties, but can write zero code and it works :-) There are a few assumptions in here, such as the datahandler method takes the foreign key fields as arguments to retrieve the data for the nested grid and that the nested object is a grid. However if you don't set the DatahandlerName then the grid can be used as before with adding anything into the ItemTemplate field.

The other change I made was to make it XHTML compliant. The original version added a few attributes (expandClass, expandText, collapseClass, collapseText) to the grid, which were picked up in the javascript to perform the expand/collapse function. However these none standard attributes made it fail the XHTML standards. I changed this by adding the attributes to the javascript when it is built up in the OnInit method of the ExtGridView class. Now it has a big green XHTML pass :-)

You can download my modified version here


Kennyp said...

i'm having a few problems getting this to work and it's probably something fundamental but i'm stuck nonetheless and wondered if you could help.
I have created a new project in VS2005, removed the default page and the web.config and added the vb as a class file. I then created a new project and used the dll generated from my inital project to insert 'Expandable gridview' on my toolbar. Once i drag this onto my second project's main form though, i get "error rendering control - object reference not set to an instance of an object".
Am i going about this the right way at all?
Any help wold be appreciated.
cheers kenny.

levienigma said...

I'm using the gridview that you started with from code-project, and I have removed the SQL connection string so that I could populate the gridview from a flat file and all of that works. The problem I am having is that the expandable feature doesn't display in the column. the (column displayes) but not the image and I have it looking at the right folder, so I am unable to see if there is Data in the expandable Row. I am new to Gridview. Thank you in advance for your help.

Jais said...

I am using Expandable gridview. It worked well for me. Is it possible to
make it Sortable ?

holger said...


I realy like the idea of your ExpandableGridView but I was wondering if it would be possible to get an example on how to use it?

Thanks Holger

uiyui said...

welcome to the wow power leveling cheap wow power leveling service site,WoW Gold buy cheap wow gold,wotlk gold,world of warcraft power leveling buy wow gold

CJB said...

Your download link isn't working. Where can I get a copy of this code?

Adi said...

Oes Tsetnoc one of the ways in which we can learn seo besides Mengembalikan Jati Diri Bangsa. By participating in the Oes Tsetnoc or Mengembalikan Jati Diri Bangsa we can improve our seo skills. To find more information about Oest Tsetnoc please visit my Oes Tsetnoc pages. And to find more information about Mengembalikan Jati Diri Bangsa please visit my Mengembalikan Jati Diri Bangsa pages. Thank you So much.