- 12 minutes to read
- Traditional tabular format (Grid View)
- Banded tabular format (Banded Grid View and Advanced Banded Grid View).
- Cards (Layout View and Card View)
- Tiles (Tile View)
- Windows Explorer-inspired style (WinExplorer View)
Data shaping capabilities allow you to sort, group, and edit data, calculate summaries, merge cells, and implement master-detail and split presentations. You can also filter and search data with various options including built-in column filters and the Find Panel.
You can bind to all traditional data sources. To work with large data sources, use dedicated synchronous and asynchronous server modes.
Get Started With Data Grid and Views
Introduces the Grid Control and its data presentation formats - Views. You will learn about the main features of Views, and how to switch between Views, supply data, and customize the layout of columns, bands, and card fields.
Describes the components included in the Data Grid suite (lookup editors and split container).
Illustrates the visual elements of the Grid Control and its Views.
A list of examples grouped by task.
Bind to Data
To display data within the Data Grid, you first need to bind it to a data source. Note that the Grid has no unbound mode and cannot function without a source.
The control shows data from its source as is. To display initially filtered or sorted data, or merge multiple data sources into one, manipulate the data at the data source level before binding the Grid to this source. If you cannot modify the data source, use unbound columns instead. See this help topic to learn more: Unbound Columns.
The following data binding modes are supported:
- ADO.NET data sets
- SQL data
- Entity Framework data
- XML data
- Excel data sources
- LinQ To SQL
- WCF Data Services
- DevExpress ORM Tool (XPO)
- Lists or arrays of objects created in code
- Synchronous and Asynchronous Server Modes
- Unbound Columns
The Data Grid control uses Views to display data from a bound data source. The Views specify how records and record fields are arranged. They contain multiple edit, display, behavior, and appearance options. Choose one of the following View types to render data as required.
- Grid View - Displays data in a tabular form.
- Banded Grid View - Displays data in a tabular form and organizes columns into bands.
- Advanced Banded Grid View - Displays data in a tabular form and organizes columns into bands. Supports complex data cell arrangements.
- Layout View - Displays records as cards in one or more columns, in one or more rows, in an ellipse (carousel mode), or as a single card at a time. Supports complex card field layouts, built-in groups, tabbed groups, and labels.
- Card View - Displays data records as cards, arranged down and then across. Card fields are always arranged in a single column.
- WinExplorer View - Displays records using one of seven styles supported by Microsoft Windows Explorer — Small, Medium, Large, Extra Large, List, Tiles, and Content. Supports HTML-CSS templates that allow you to override the default data presentation in these styles.
- Tile View - Displays records as read-only tiles, using one of the following layout modes: default (standard table layout), list (tiles have no space between them), and Kanban. This View includes the Tile Template feature, which helps you arrange fields relative to other fields, specify absolute or relative field display bounds, etc.
Grid View Data Layout
The most traditional tabular format, encapsulated by the Grid View, presents data source fields as columns and data source records as rows. The following are only a subset of the features supported by the grid layout:
- End-user column resize and rearrangement
- Column auto-width and best fit
- Fixed columns (frozen panes)
- Split presentation
- Row preview sections
- Cell merge
- Horizontal and vertical scrolling
- Auto and custom row height
- Runtime row resize
You can group data against one or multiple columns in Grid Views, Banded Grid Views, and Advanced Banded Grid Views.
- An end-user can group data at runtime by dragging a column to a dedicated Group Panel.
- Data group modes: by column values or display text.
- Group date-time values by years, months, or into common date intervals (Today, Tomorrow, Sunday, Monday, Tuesday, Next Week, Next Month, Last Week, Last Month, etc.).
- Implement custom grouping with an event.
- Fixed group rows.
- API to process group rows.
- Sort grouped data by summary values.
- You can sort data in all Views by one or more columns in code to specify the order of records in the Data Grid.
- An end user can sort data at runtime in Grid Views, Banded Grid Views, Advanced Banded Grid Views, Layout Views, and Card Views.
- The Data Grid sorts its data itself and does not delegate this functionality to the underlying data source (except for server modes).
- Sort by values or display text.
- Implement custom sorting algorithms using an event.
- Sort grouped data by summary values.
Grid Views, Banded Grid Views, and Advanced Banded Grid Views allow you to calculate multiple summary functions: the number of records, the maximum column value, a sum of column values, custom function, etc.
The following summary features are available:
- Calculate total summaries (against all rows)
- Calculate group summaries (against grouped data)
- Calculate summaries manually (using an event)
- Select a summary function at runtime using a context menu
- Show multiple total summaries for a single column
- Display group summaries in footers and group rows
- Obtain and format summary values
- Sort grouped data by summary values
Data Grid editors allow you to specify how column values are displayed and edited. An end user can edit records in-place and within a separate edit form. If a data source allows CRUD operations, you can use the grid’s API to perform these operations in code. A user can manage records with a standalone or embedded Data Navigator control.
The Data Grid includes the following features to edit data:
- Add and remove rows, in code and using a Data Navigator control
- Edit data with 35+ in-place editors
- Edit data in a standalone (modal) or in-line edit form
- Modify data in code
- Validate editor input
- Implement multiple editors per column
Filter and Locate Rows
The Data Grid supports multiple ways to filter and locate rows. To search for data, users can use a dedicated Find Panel (CTR+F) or the incremental search feature. Filter criteria created in code or at runtime allow you to limit the number of displayed records.
The following filter options are available:
- Built-in Find Panel
- Regular and MS Excel-inspired filter dropdowns
- Filter history
- Filter editor (to create complex filter criteria)
- Incremental search
- Built-in filter row
- API to filter and locate rows
- Event to manage row visibility
Focus and Selection
The Data Grid control allows a user to navigate between cells (move cell focus) with a mouse and keyboard. You can prevent certain column cells from being focused.
Multiple row/card and cell selection can also be performed using the mouse and keyboard. In addition, users can select rows in Grid Views with the built-in Check column (which displays checkboxes within rows). See the following topics for more information:
Multiple Row and Cell Selection
Contains information on single row selection, multiple row selection, and multiple cell selection modes.
Multiple Row Selection - Built-In Check Column and Selection Binding
Describes the built-in Check column, which enables users to select rows with check boxes.
Focus Data Grid Cells
Shows how to move focus between cells at runtime, and how to specify a focused cell’s appearance.
Move Row Focus
Describes methods that enable you to move row focus by a specified number of rows.
Describes navigator controls, which allow users to browse through the grid control’s data and add/delete records.
You can assign an in-place editor to a column to format the column’s values (for display and edit modes) in a specific manner. Column in-place editors automatically format cell values according to the editor’s type and settings.
- Format Cell Values
Shows how to format cell display text with HTML tags, events, masks, and the standard .NET formatting mechanism.
The Data Grid supports hierarchical data sources, which consist of master and detail tables (lists) linked by one-to-many relationships. You can display master tables in Grid Views, Banded Grid Views, or Advanced Banded Grid Views, and show detail tables in any View type.
If records in the bound data source contain a property (or properties) of a collection type, the Data Grid automatically enables master-detail mode to render these collections.
For data sources that cannot organize master-detail relationships at the data layer, use one of the following techniques to add master-detail functionality:
- Implement the IRelationList interface for your data source.
- Handle the grid control’s dedicated events.
Print and Export
You can print and export Grid Control data to multiple formats. If you export to Microsoft Excel format (XLS and XLSX formats), you can enable data-aware export mode. This mode allows users to shape and analyze data in an Excel document.
Appearance and Conditional Formatting
You can apply one of many built-in skins to change the Data Grid’s look and feel. The Appearance mechanism allows you to change the colors and fonts of certain grid elements (grid columns, focused row, etc.). If you wish to highlight critical information, identify trends, or compare data between cells, use the Conditional Formatting feature.
Drag-and-Drop Grid Rows
Users can drag and drop data items (rows, tiles, etc.) to move them inside the Data Grid, or from the Data Grid to another control. See this help topic for more details: Drag-and-Drop Grid Rows.
Demonstrates two techniques to traverse rows: through all data rows and through currently visible rows.
Asynchronous Image Load in WinExplorer and Tile Views
The Data Grid loads all data from its data source before showing it on screen. To improve application performance at startup if your grid records contain large images, enable the Asynchronous Image Load feature. In this mode, the grid loads textual data first and immediately displays it. Images are loaded in a separate thread and displayed one by one using optional visual effects.
Batch modifications are designed to eliminate unnecessary updates (for example, visual, resort, and selection updates) to improve the grid control’s performance. The main objective is to update the View only once - after all necessary changes have been made.
Save and Restore Layout
The term “layout” encompasses all the settings that control the visibility and size of visual elements, their appearance settings, filter, sorting, grouping, and summary information, etc. The Grid Control exposes methods to save the layout to a data store (an XML file, a stream, or the system registry) and then to restore it.
There are times when you may need to recognize which element is located at the specified screen coordinates in applications. For instance, you may have to determine which part of a View the user has clicked or double-clicked. For this purpose, Views include the CalcHitInfo method, which accepts a point measured in grid control client coordinates and returns a Hit Info object containing information on the View element at this point.
When a user hovers the mouse pointer over a visual element (for example, a column or band header) with truncated text, a hint displays the entire text. This section explains how to modify default hints and add custom hints.
The Data Grid supports built-in popup menus for column headers, row footers, and the group panel. When required, you can add your own popup menus for any grid element or customize the existing menus.
Design-time tools speed up the design process of the Data Grid control, and allow you to create a working application from scratch without writing code.
The Level Designer helps you create Views to display your data, and to access these View settings easily at design time. For hierarchical data sources, this designer allows you to assign a View for each data level.
The advanced Grid Designer enables you to customize Views, bands, columns, summaries, in-place editors, appearance settings, layout, and other options. The Feature Browser page allows you to customize options and events for Views and columns, categorized by feature. On this page, you can find settings and events related to a specific functionality.
On-form Band and Column Customization
This topic explains design-time on-form customization of column and band layouts supported by Grid Views, Banded Grid Views, and Advanced Banded Grid Views.
The topics in this section describe operations available to users at runtime.
The Data Grid enables users to do the following:
- Edit data
- Control column, band, and card field visibility
- Rearrange and resize columns and bands
- Filter, sort, and group data
- Apply summaries
- Use the Find Panel and Incremental Search feature to locate rows, etc.
Server modes are used for large data sets. Even if your data source contains millions of records, the control maintains its performance because it loads records in small portions on demand and performs data-related operations (such as sort, filter, and summary calculation) on the server side. These modes replace data pagination used in data-aware controls from other vendors. See this help topic for more details: Large Data Sources: Server and Instant Feedback Modes.
Unbound columns allow you to display custom data in the grid. Values for these columns can be calculated according to an expression or using an event.