[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [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]Get Started With Data Grid and Views
   [Expand]Data Binding
    Unbound Columns
    [Collapse]Grid View
     Banded Grid Views
    [Expand]Card and Layout Views
     WinExplorer View
    [Expand]Tile View
   [Expand]Data Editing and Validation
   [Expand]Filter and Search
   [Expand]Focus and Selection Handling
    Format Cell Values
   [Expand]Master-Detail Relationships
   [Expand]Asynchronous Image Load
   [Expand]Export and Printing
   [Expand]Appearance and Conditional Formatting
    Split Presentation
    Row Preview Sections
   [Expand]Batch Modifications
    Hit Information
    Popup Menus
   [Expand]Save and Restore Layout
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Expand]End-User Capabilities
    Included Components
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gantt Control
  [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]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)


Expanded Content Alignment

Data Grid cells that display numeric values align their content to the right. Cells that display data of other types arrange their content to the left. To change cell content alignment, handle the ColumnView.RowCellDefaultAlignment event.

Demo: Cell content alignment

Expanded Selection Modes

End-users can select (focus) only an entire row at once by the default. Set the GridOptionsSelection.MultiSelectMode to the GridMultiSelectMode.CellSelect value to allow selecting individual cells. In this mode, end-users can utilize "Ctrl" and "Shift" keys to select multiple cells at once.

Related API

Demo: Cell Selection

Expanded Display Text and Cell Value

A cell value is the value stored in a data source. A cell display text is a value shown to end-users. When the Data Grid sorts or filters data, it processes cell values by default. You can make the control sort and filter data by cell display values instead. To do so, utilize the GridColumn.SortMode and GridColumn.FilterMode properties.

Certain Grid features (e.g., formatting) alter the way actual cell values are shown to end-users. To manually modify a cell display text without changing an underlying value, handle the ColumnView.CustomColumnDisplayText event. In the following example, cells that belong to the "Length" column show nothing, if their actual values are greater than 20.

Expanded Cell Icons

There are multiple ways to supply Data Grid cells with icons.

Conditional formatting

This approach is recommended when you have a static icon set to visualize different values or value ranges. In this scenario, icons are displayed next to cell values.

Documentation: Appearance and Conditional Formatting

Demo: Excel Style Filtering

ImageComboBox in-place editor

This approach allows you to supply cell values with corresponding images or completely replace text entries with these images. The code below illustrates how to replace check boxes for a boolean "Read" column with letter icons.

Demo: Outlook Style Grouping

TextEdit context icons

The RepositoryItemTextEdit.ContextImageOptions group provides access to properties that allow you to assign a raster or vector icon to a RepositoryItemTextEdit object. By doing so, you can display the same icon for all cells that utilize this repository item. To display another icon for individual cells, create a separate RepositoryItemTextEdit and handle the GridView.CustomRowCellEdit event to assign this repository item. In the example below, the "Ship Country" column cells have no custom editor. A RepositoryItemTextEdit with an icon is assigned only for rows that display orders to Denmark.

HTML Formatting

Use the Image tag to embed images into cells. Note that this approach makes a cell non-editable.

Unbound columns

If you need a column with images, not associated with specific data source values, create an unbound column with a RepositoryItemPictureEdit object as an in-place editor. Handle the ColumnView.CustomUnboundColumnData event to supply this column with images.

Custom draw

Handling the GridView.CustomDrawCell event allows you to manually re-paint cells, and draw custom images and shapes. In this example, the "Ship Country" column cells have no custom editor. An editor icon is manually painted for rows that display orders to Denmark.

Expanded Cell Merging

In GridView and BandedGridView Views, cells with the same values can automatically merge. Note that merging relies on cell values, not cell display text.

Merged cells impose the following limitations:

Related API

In this example, the Data Grid contains the "Created By" column that displays e-mail addresses. The ColumnView.CustomColumnDisplayText event is handled to trim these addresses to domain names. Since this event changes only cell display text, cell values remain intact and no merging occurs. To fix that, the GridView.CellMerge event is handled.

Demo: Cell Merging

Expanded Access Grid Cells in Code

Expanded See Also

Is this topic helpful?​​​​​​​