Outlook Style DataGrid

• Download source - 29.4 KB

Introduction

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.

Background

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_RowsAdded, 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 DataGridView control.

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
as
select     distinct CUSTOMERID
from     ORDERS
ORDER BY CUSTOMERID 
GO

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
@customerId varchar(50) 
as 
select OrderID, ShipName, ShipAddress
from orders where customerid= @customerId
GO

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.

History

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.