The .NET Newbie's Guide to Customizing the DataGridView Control : Page 2
If you're a .NET newbie coming from Access or SQL Server, let .NET do the hard work of creating a connection to foreign data. Then customize the resulting control to add functionality.
by Charlotte Foust
Susan Sales Harkins
Jun 4, 2009
Page 2 of 3
Enhancement One: Alternate Row Colors
The first enhancement you will make to the control that the wizard produced is to improve readability by alternating the row colors. With the DataGridView, it's as easy as changing a property:
In Form Design, select the DataGridView control. (Don't double-click, as that will open the form's code page.)
In the Properties window, open the AlternatingRowsDefaultCellStyle properties.
Click the BackColor property's dropdown arrow to display the CellStyleBuilder dialog box.
Choose a color other than the current color (white by default). For this example, select blue (as shown in Figure 2) and then click OK.
Press F5 to run the application. Figure 3 shows the populated grid control using alternating row colors.
Figure 2. CellStyleBuilder Dialog Box: Select an alternating row color.
Figure 3. The Populated Grid Control: The control alternates blue and white row colors.
Remember, the property sets alternating row properties, not all row properties. If you want more variety, set the BackColor and ForeColor properties accordingly.
Enhancement Two: Controlling Sort Order
Initially, the control you produced populated by table order because it had no specified sort order. However, sorting is native to the DataGridView. Simply click a header cell and the control will sort the records by that column in ascending order. A second click will sort the records in descending order. For a bit more control, you can sort the data when populating the control:
In Form Design, select the CustomersBindingSource component just below the form. Selecting it will update the items in the Properties window accordingly.
Find Sort (at the very bottom) and enter City, as shown in Figure 4.
Press F5 to run the application. As you can see in Figure 5, the control sorts the records by the City values in ascending order. For a descending sort, simply include the DESC keyword. For example, to sort by the City values in descending order, you'd enter City DESC, instead of just City.
Figure 4. Find Sort and Enter City: Specify a sort column.
Figure 5. The Control Sorts the Records: The form sorts the records by the City values.
You may choose to inhibit this native sort capability. You can do so with just a bit of code, but you must add a statement to the form's class for each column that you want to disable. For instance, to inhibit the sort capability for the Contact Title column, do the following:
Figure 6. Clicking the Builder Button: Click the Builder button to view the grid's Columns collection.
With the form in Design view, choose Code from the View menu, or press F7.
Start typing the statement. You'll quickly find that IntelliSense doesn't display the control's underlying columns by name. Instead, it presents a list of columns identified by position, which isn't the best way to reference columns.
To change the default name of a DataGridView control's columns, you must change the Columns collection for the control itself. In Design view, double-click the grid (not the form). You might have to enlarge the form just a bit to select only the grid. Doing so will update the properties. When the properties title displays CustomersDataGridView, you know you've selected the grid and not the form.
Locate the Columns collection and click the Builder button shown in Figure 6 to launch the Edit Columns dialog box.
In the Select Columns control, select ContactTitle.
In the Design section (bottom right), the Name property for this control is DataGridViewTextBoxColumn4. Simply replace it with a more meaningful name. In this case, DataGridViewTextBoxContactTitle, as shown in Figure 7. Although you won't do so right now, this is where you would render invisible columns that you don't need by setting the Visible property to False.
Click OK and return to the code window (Form1.vb).
This time, IntelliSense lists the column by name, instead of position (see Figure 8).
Save the changes you just made by clicking Save Form1.vb in the Standard menu.
Press F5 to execute the project. In the resulting form, click ContactTitle's header cell. This time, the form won't sort the records. That's because the statement you entered disabled that feature for that column.
Figure 7. A Meaningful Name for the Name Property: Enter a meaningful name for the column.
Figure 8. IntelliSense Lists the Column by Name: Using a column name instead of a position number is self-documenting.