Log In
[Expand]General Information
[Collapse]WinForms Controls
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Collapse]Data Grid
   [Expand]Getting Started
   [Expand]Binding to Data
   [Expand]Grid View
   [Expand]View Technology
   [Expand]Data Editing
   [Expand]Filtering and Locating Rows
   [Expand]Focus and Selection Handling
   [Expand]Processing Rows
   [Expand]Formatting Cell Values
   [Expand]Master-Detail Relationships
   [Expand]Asynchronous Image Load
   [Expand]Export and Printing
   [Collapse]Appearance and Conditional Formatting
    [Expand]Look and Feel
      Appearances Overview
      Tutorial: Custom Styles for Rows and Cells
      Tutorial: View and Column Appearance
      Customizing Appearances of Individual Columns, Card Fields and Bands
      Customizing Appearances of Individual Rows and Cells
      Style Schemes
    [Expand]Conditional Formats
    [Expand]Custom Painting
    [Expand]Alpha Blending and Background Images
   [Expand]Batch Modifications
   [Expand]Hit Information
   [Expand]Popup Menus
   [Expand]Saving and Restoring Layouts
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Expand]End-User Capabilities
    Included Components
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]PDF Viewer
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Report Server
[Expand]eXpressApp Framework
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Customizing Appearances of Individual Rows and Cells

Grid Control elements can be customized using Appearance technology. This document demonstrates how to specify appearance settings for individual rows/cards and cells.

Expanded Online Video

Learn how to change the appearance of individual rows and cells using events.

Expanded Customize the appearance of rows (in various states) and odd/even rows

Each View provides individual properties controlling the appearance of data rows, cells, cards and group rows in different states (normal, selected and focused). In addition, there are individual properties controlling the appearance of odd and even rows in GridViews. All these appearance settings can be accessed using the View's Appearance object, which contains a set of options controlling the appearance of various View elements (not only rows, but also filter and footer panels, cell separators, preview sections, etc.)

The following image demonstrates the settings provided by the GridView.Appearance object. The BackColor option of the Row property is set to a custom value.

Here is the Grid Control painted using these appearances.

The appearance settings of View elements can also be changed in the Appearances Page of the Grid Control Designer, which provides a preview window, allowing you to immediately see the result of the customization.

Expanded Customize the appearance of cells belonging to a column

To customize the appearance of cells residing within a specific column, use the GridColumn.AppearanceCell property.

The following image shows a Grid Control with custom background and foreground colors applied to the Product Name column.

By default, column appearance settings take priority over the View appearances that are used to paint cells within regular and selected rows. However, column appearance settings are overridden by the View appearances that are used to paint the focused row and focused cell. To learn how to change the priority of appearance settings, see the Customizing Appearances of Individual Columns, Card Fields and Bands topic.

Expanded Customize the appearance of rows and cells matching specific criteria

Conditional Formatting is a simple way to customize the appearances of specific cells/rows based on specific conditions. To provide more complex conditions, handle the appearance customization events described below.

Expanded Customize the appearance of individual rows and cells using events

The GridView.RowStyle event can be handled to customize the appearance of individual rows in GridViews. To customize a specific cell's appearance, handle the GridView.RowCellStyle event instead. The GridView.RowStyle event fires before the GridView.RowCellStyle event.

Each of these events provides the e.Appearance parameter whose settings can be used to customize the background and foreground colors, gradient mode, text display options, etc.

Besides these events, you can also handle the GridView.CustomDrawCell event to change the appearance of cells. However, customizations made using this event are not applied to the printed and exported versions of the Grid Control. See the Custom Painting Basics document for more details on custom drawing events.

Expanded Example - Customizing appearances of rows using the RowStyle event

In the following example the GridView.RowStyle event is handled to customize the appearance of rows which have the value "Beverages" in the Category column. These rows are painted using gradient filling. The starting and ending gradient colors are specified via the AppearanceObject.BackColor and AppearanceObject.BackColor2 properties of the event's RowStyleEventArgs.Appearance parameter.

The result is displayed below. Note that the gradients are applied to the entire rows and not to individual cells:

Expanded Example - Customizing appearances of cells using the RowCellStyle event

The following example demonstrates using the GridView.RowCellStyle event. This event is fired for each cell in a Grid View and thus it has Column and RowHandle parameters that identify the cell being painted.

In the example below, the appearance of cells in the "Count" and "Unit Price" columns are customized if they reside within rows that contain the "Seafood" string in the "Category" column.

The following image illustrates the result. Note that unlike the previous example, the gradient is applied to individual cells and not to entire rows.

Expanded Cell Border Color

You can change the border color of all cells using the GridView.Appearance.HorzLine.BackColor (GridViewAppearances.HorzLine) and GridView.Appearance.VertLine.BackColor (GridViewAppearances.VertLine) properties.

The approach shown in the following online article allows you to change the border color and width of the focused cell.

Expanded See Also

How would you rate this topic?​​​​​​​