Getting Started With Data Grid and Views
- 12 minutes to read
The WinForms Data Grid (GridControl class) is a data-aware control that can present data in various formats (Views). This document provides the following sections which will guide you through the basics of working with the Grid Control, its Views and columns (fields).
- Grid Control’s Views
- Selecting View
- Providing Data for Views and Populating Column Collection
- Accessing and Customizing Views and Columns at Design Time
- Accessing and Customizing Views and Columns in Code
- Layout of Columns and Bands (in Grid Views and Banded Grid Views)
- Learn More
Online Video
This video walks you through basic Data Grid customization. It begins with an empty Data Grid control with an applied GridView format, which presents records as rows and columns. Then, it shows the main grid control features: data binding, creation of columns, sorting, grouping and filtering data, summaries, access to grid options, in-place editors, etc. Finally, the GridView is converted to the LayoutView format, which presents underlying data as cards, instead of rows and columns.
Grid Control’s Views
The WinForms Data Grid control supports multiple data presentation formats.
- Tabular
- Banded tabular
- Cards.
- Windows UI-inspired Tiles
- MS Windows Explorer-inspired UI
All these display formats are encapsulated by Views - visual components that can be embedded in the Data Grid.
To present your data in a specific manner in the data grid control, choose a View that most suits your needs, assign it to the data grid, and then use the View’s properties, events and methods to customize the View to your liking.
Grid View (GridView class)
 GridView - Data Grouping  GridView - Two Dimensional Table  GridView - Conditional Formatting  GridView - Cell Merging  GridView - Row Auto Height | Displays data in a tabular form. Main features:
|
Banded Grid View (BandedGridView class)
 BandedGridView - One Band Level - Row Auto Height  BandedGridView - Nested Bands  BandedGridView - Fixed Bands and Data Grouping | Displays data in a tabular form and allows grouping of columns into bands. Main features (match those of the Grid View):
|
Advanced Banded Grid View (AdvBandedGridView class)
 AdvBandedGridView - Data Grouping  AdvBandedGridView  AdvBandedGridView - Customization Form | Displays data in a tabular form, allows grouping columns into bands and supports complex data cell arrangements. Main features (match those of the Grid View, except for Cell Merging):
|
Layout View (LayoutView class)
 LayoutView  LayoutView - Runtime Customization  LayoutView - Carousel Mode  LayoutView | Presents records as cards, which can be displayed in one or multiple columns, one or multiple rows, in an ellipse (carousel mode) or a single card at a time. Supports complex card field layouts, built-in groups, tabbed groups and labels. Main features:
|
Card View (CardView class)
 CardView  CardView - Runtime Customization | Presents data records as cards, arranged down and then across. Card fields are always arranged in a single column. Main features:
|
WinExplorer View (WinExplorerView class)
 WinExplorerView - Tiles Style  WinExplorerView - Small Style  WinExplorerView - Medium Style  WinExplorerView - Large Style  WinExplorerView - ExtraLarge Style  WinExplorerView - Content Style  WinExplorerView - List Style | Displays records using one of seven styles supported by MS Windows Explorer - Small, Medium, Large, Extra Large, List, Tiles and Content. Main features:
|
Tile View (TileView class)
 TileView  TileView - Grouping | Displays records as read-only tiles, using one of the following layout modes: default (one or multiple columns/rows), list (without spaces between records) and Kanban. This View provides the advanced field positioning feature, which helps you arrange fields relative to other fields, specify absolute or relative field display bounds, etc. Main features:
|
Selecting View
When you drop a GridControl onto the form at design time (or when you create this control in code), it is created with an embedded GridView - a View that presents underlying data as a two-dimensional table.
Design time:
Runtime (after binding the grid to data and adding columns to the GridView).
At design time, the data grid displays the Level Designer at the right bottom corner, which provides functionality to access and manipulate the grid control’s Views and invoke the data grid’s main Designer.
The 
box in the Level Designer identifies the current View, which as the name implies is of the GridView type.
You can easily replace this View by using the (Click here to change view) command.
Select one of the following options.
- Convert to - Allows you to convert the clicked View to another type. The conversion transfers columns (if they exist) and appropriate settings from this View to a new View. The old View is then destroyed.
- Create new view - Allows you to select a new View without destroying the old View. You can access the new and old Views later in the Level Designer, the grid control’s Designer and the GridControl.ViewCollection property in code.
For instance, if you convert the existing GridView to the CardView type, the Level Designer will display the 
box.
At runtime, you will see the following card UI, instead of the default tabular format.
Note
The Grid Control is also capable of displaying hierarchical data sources, which consist of two or more tables (data lists) linked by master-detail relationships. These relationships are also called one-to-many relationships: each record in a master table corresponds to one or more records in a child (detail) table. Using the Level Designer, you can specify the Views that will represent master and detail tables. To learn more, see master-detail relationships.
Providing Data for Views and Populating Column Collection
Data for the View(s) is provided by the grid control’s bound data source, which is specified by the GridControl.DataSource and GridControl.DataMember properties.
At design time, you can bind the control to data from the data grid’s smart tag.
You can do one of the following:
- Select Data Source Wizard to launch the DevExpress Data Source Configuration Wizard, which simplifies binding to various data source types (ADO .NET, SQL data, Entity Framework, etc.).
- Open a dropdown next to Choose Data Source to run the Visual Studio data source configuration wizard.
For more information on binding to various data source types, refer to Data Binding.
Once you bind the grid control to data, the View automatically creates columns for all fields in the bound data source (provided that the grid column collection was empty prior to the binding). The following image shows a GridView populated with data from a sample data table containing five fields.
The automatic column population feature can be disabled with the View’s OptionsBehavior.AutoPopulateColumns (ColumnViewOptionsBehavior.AutoPopulateColumns) setting.
Unlike other Views, the WinExplorerView and TileView do not automatically make the added columns visible. For these Views, additional customization is required to set up a layout within items/cards. More information can be found in the WinExplorer View and Tile View topics.
Accessing and Customizing Views and Columns at Design Time
Views and their columns provide multiple options and events to customize the way underlying data is presented on-screen. You can access and customize their settings in a number of ways.
On-Form Selection and Property Grid
The View and column objects are visual components, and thus they are accessible from the Visual Studio Property Grid.
Additionally, the data grid supports design-time on-form selection of Views and columns. To select a View and list its settings in the Property Grid, click the View in the Level Designer.
To select a column, click its header directly on the form.
Smart Tags
For columns in GridViews, Banded GridViews and Advanced Banded GridViews, smart tags enable you to modify the main column settings.
Grid Designer
Greater control over Views, columns and column in-place editors is provided by data grid’s main Designer. The latter also provides a UI (see below) used to quickly locate settings related to a specific functionality. The Designer can be invoked by clicking the Run Designer button from the Level Designer.
The main Designer contains multiple pages that can be selected using a navigation bar on the left. For instance, the Views page is equivalent to the Level Designer. It allows you to access the current top level View and nested Views (if any).
The Columns page shows available data source fields and columns (visible and hidden) that are bound to these fields. You can customize individual columns, clear the column collection, add new columns manually or populate the View with columns from the bound data source with a single button click.
Make a note of the Feature Browser page, which gathers options and events provided by View and column objects into a set of categories (features). This is the best starting point for finding settings and events related to a specific functionality.
For more information on the capabilities provided by the main Designer, please refer to the Grid Designer topic.
Accessing and Customizing Views and Columns in Code
A grid control’s View and column objects are components. Thus, when created at design time, you can access them in code by their names.
You can also access the grid control’s top level View with the GridControl.MainView property. But first, you may need to cast this property value to the required View type.
GridView view = gridControl1.MainView as GridView;
if (view != null)
view.OptionsView.RowAutoHeight = true;
The following example shows how to replace the existing main View with a new LayoutView in code.
Individual columns can be retrieved from the View’s ColumnView.Columns collection by the index or field name.
In master-detail mode, the data grid control displays multiple Views at runtime (for each master row its own detail View can be opened). The following properties and methods are helpful when addressing displayed detail Views: GridControl.FocusedView, GridView.ExpandMasterRow and GridView.GetDetailView. To learn more, please refer to Master-Detail Relationships.
Example
The following example replaces the existing top level View with a BandedGridView, and adds a band and column to the View.
using DevExpress.XtraGrid.Views.BandedGrid;
//Dispose of the old view
gridControl1.MainView.Dispose();
//Create a Banded Grid View
BandedGridView bandedView = new BandedGridView(gridControl1);
gridControl1.MainView = bandedView;
//Add one band and one column to the view
GridBand band = bandedView.Bands.AddBand("General");
BandedGridColumn column = (BandedGridColumn)bandedView.Columns.AddField("CustomerID");
column.OwnerBand = band;
column.Visible = true;
Layout of Columns and Bands (in Grid Views and Banded Grid Views)
After grid columns are created, you may want to customize the layout of columns (and bands in Banded Views) in a custom manner. This section describes basic customization capabilities available for Grid and Banded Grid View types at design time. All these actions can be replicated in code, if required, by adjusting corresponding View and column settings.
To learn about customizing other Views, refer to the following topics.
The GridView, BandedGridView and AdvBandedGridView support on-form design-time layout customization. You can re-order, resize and hide columns and bands using drag-and-drop.
The context menu, invoked on a column header click, allows you to sort and group data against a column, calculate the best column width and show the Column Chooser (Column/Band Chooser in Banded Views) - a floating panel that provides access to hidden columns (and bands in Banded Views). Hidden columns (and bands) can be restored from the Column/Band Chooser back to the View using drag-and-drop.
Instead of these design-time actions, you can modify the corresponding settings of grid columns and bands in the VS Property Grid (GridColumn.VisibleIndex, GridBand.VisibleIndex, GridColumn.Width, GridColumn.SortOrder, GridColumn.SortIndex, etc.).
For Banded Views (BandedGridView and AdvBandedGridView), use the Bands page of the data grid’s Designer to add new bands and re-arrange bands and columns (you can also re-arrange bands and columns right on-the-form).
Learn More
More information on the features and related options provided by data grid Views is covered in the following sections.