Introduction:

The datagrid control in the window application can be easily customized as been done in web applications. The thing is datagrid in web can be designed using HTML tags and the same can be done in the window using the DataGridTableStyle namespace. The following example with the source code will explain clearly to achieve the same.

The following steps create an application showing the Northwind Products table in a DataGrid.

1. On the File menu, select New, and then select Projects to create a new Windows Application project. Name the project CustomDataGrid.

2. From the Toolbox, drag a DataGrid onto the displayed Form. Size it to generally fill the Form, and set its Anchor property to all four sides. The anchored Form in Visual Studio should look similar to Figure 1.

         Figure 1:

3. Next, from the View menu, select the Server Explorer Window. Under Data Connections, open the Northwind node from the Tables list. Drag the Products table onto your Form on the Design Surface. After doing so, two components should display in the Components tray at the bottom of the Design Surface, an SqlConnection1 and an SqlDataAdapter1, as shown in Figure 2. 

         Figure 2:

4. Right-click the SqlDataAdapter1 component and select Generate DataSet. The Generate DataSet dialog box appears, as shown in Figure 3. Press ENTER to accept the default action, which is to create a typed dataset, and place an instance of this dataset into your Component tray. 

    Figure 3:

   5.  On the Design Surface, click the DataGrid, and then on its property grid, set

        the  DataSource property to DataSet11Products. 

6. Add a Form Load event handler by double-clicking an empty spot on the Form. In this event handler, type the following single line of code:  

        Me.SqlDataAdapter1.Fill(Me.DataSet11)

7. Finally, compile and run your project. The grid should appear as illustrated in Figure 4.

Figure 4:

Customizing the Grid: Columns and Column Order

For the DataGrid, both the columns that appear in the DataGrid need to be controlled, as well as the order of their appearance. The columns and column order of the default DataGrid produced by the Designer is determined by the SQL Query generated as part of creating the SqlDataAdapter. From the default DataGrid, it is necessary to remove both the "SupplierID" and the "CategoryID". Also, the "Discontinued" column must be moved so that it is the very first column in the DataGrid instead of the last column.

It is possible to go back and manually adjust this SQL Query to control, which columns would appear in the DataGrid, and their order of appearance. But instead, the following demonstrates how to add a DataGridTableStyle to the DataGrid.

Once the DataGridTableStyle is added, it is possible to control which columns appear in the DataGrid, and their order of appearance by which DataGridColumnStyles are added to the DataGridTableStyle GridColumnStyles collection. The GridColumnStyles used by the DataGrid are determined at the point the DataGridTableStyle is added to the DataGrid.TableStyle collection. If the TableStyle.GridColumnStyle has not been populated with this collection by this point, a default set of ColumnStyles is created and used by the DataGrid. However, if DataGridColumns are specifically added to a DataGridTableStyle before adding the DataGridTableStyle to the DataGrid.TableStyles collection, then the columns that appear in the DataGrid are exactly those in the specified DataGridTableStyle.GridColumnStyles collection, and the column order will be the same as the order in the DataGridTableStyle.GridColumnStyles collection.

Before examining the code snippets that set the columns and column order, first look at the DataGridColumnStyle class. This is an abstract class. Normally, either the DataGridTextBoxColumn or the DataGridBoolColumn classes (the two DataGridColumnStyle derived classes shipped with the .NET Framework) are used. The main purpose of these classes is to control the appearance of a column in the DataGrid. For example, the DataGridBoolColumn makes the column look and behave like a check box.

The correspondence between a particular column in a DataTable, and a particular DataGridColumnStyle object is made through the DataGridColumnStyle.MappingName property. This property is the one required property that is needed to be set when creating a DataGridColumnStyle. Other DataGridColumnStyle properties of interest include Header, ReadOnly and Width.

The default DataGrid has the following ten columns in this order: ProductID, ProductName, SupplierID, CategoryID, QuantityPerUnit, UnitPrice, UnitsInStock, UnitsOnOrder, ReorderLevel and Discontinued. In the customized DataGrid, only eight columns are necessary in the following order: Discontinued, PrdID, PrdNAme, Quantity, Price, Stock, Order and Reord

The following is a modified Form Load event handler that will create the DataGridTableStyle (step 1), create the DataGridColumnStyles and add them to the GridColumnStyles collection (step 2), and finally, add the DataGridTableStyle to the DataGrid.TableStyles property (step 3).