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