In this implementation, I have tried to create an Outlook style DataGrid which has expand/collapse functionality. There are several custom controls available in the market which have rich Outlook type grid functionality. What I am trying to do here is to illustrate specifically the Expand/Collapse functionality with the new
DataGridView control that comes with .NET 2.0.
The control that Outlook uses is a SuperGrid which is not exposed for developers with .NET 2.0 controls. I have used events like
dataGridView1_CellContentClick to illustrate how this functionality can be achieved easily using the
DataGridView control. The idea is to achieve a Master and Detail view of the data. Master details will be displayed by default; on expanding a Master row, the corresponding details rows will be populated.
Using the Code
The code uses the Northwind database that comes by default with SQL Server. Visual Studio 2005 needs to be used to get the
This code uses two Stored Procedures for getting the Master/Detail from the database. This one returns the unique CustomerID from the Orders table:
CREATE procedure OrderMaster
select distinct CUSTOMERID
ORDER BY CUSTOMERID
Create another Stored Procedure that takes the customer ID as a parameter and returns the matching order details from the same Orders table.
CREATE procedure GetCustomerDetails
select OrderID, ShipName, ShipAddress
from orders where customerid= @customerId
Points of Interest
The idea behind simulating this behavior is using three images: "PLUS", "MINUS", and "BLANK". The first column in the grid is a
DataGridViewImageColumn. The other columns are used to display data. I have not used any bound column. With further research, bound columns can also be used. Initially, only the master details are displayed, with the first column image as "PLUS". On clicking on PLUS, the image changes to MINUS and the tag property is passed as the CustomerID to get the details. Once it gets the details, it inserts rows next to the current row. Clicking on the first column again removes those rows from the grid.
I had a requirement to implement this functionality. I searched a lot, but could not find any easy solution. My requirement was just to add Expand/Collapse functionality, and so I decided to implement just this. Hope it is helpful to you guys.
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.