Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [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
   [Collapse]Getting Started With Data Grid and Views
    [Expand]Walkthroughs
   [Expand]Data Binding
   [Expand]Views
   [Expand]Data Editing and Validation
   [Expand]Grouping
   [Expand]Sorting
   [Expand]Filter and Search
   [Expand]Summaries
   [Expand]Focus and Selection Handling
    Formatting Cell Values
   [Expand]Master-Detail Relationships
   [Expand]Asynchronous Image Load
   [Expand]Export and Printing
   [Expand]Appearance and Conditional Formatting
    Split Presentation
    Row Preview Sections
    Scrolling
   [Expand]Batch Modifications
   [Expand]Hit Information
    Hints
   [Expand]Popup Menus
   [Expand]Saving and Restoring Layouts
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Expand]Examples
   [Expand]End-User Capabilities
    Included Components
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [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]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Getting Started With Data Grid and Views

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).

Expanded 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.

Expanded 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. A View features a certain UI to interact with, provides the data editing feature, and contains various appearance and behavior settings.

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)

Displays data in a tabular form.


Main features:

  • Custom and automatic row height.
  • Data sorting and grouping
  • Data filtering
  • Summaries
  • Master-detail mode
  • Row and cell selection
  • Split presentation mode
  • Fixed columns
  • In-place cell editing using various data editors
  • Cell merging.
  • Runtime layout customization

Learn more...

Banded Grid View (BandedGridView class)

Displays data in a tabular form and allows grouping of columns into bands.


Main features (match those of the Grid View):

  • Custom and automatic row height
  • Data sorting and grouping
  • Data filtering
  • Summaries
  • Master-detail mode
  • Row and cell selection
  • Split presentation mode
  • Fixed columns
  • In-place cell editing using various data editors
  • Cell merging
  • Runtime layout customization

Learn more...

Advanced Banded Grid View (AdvBandedGridView class)

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):

  • Custom and automatic row height
  • Data sorting and grouping
  • Data filtering
  • Summaries
  • Master-detail mode
  • Row and cell selection
  • Split presentation mode
  • Fixed columns
  • In-place cell editing using various data editors
  • Runtime layout customization

Learn more...

Layout View (LayoutView class)

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:

  • Simple and complex arrangement of fields within cards
  • Several card arrangement rules (in one or multiple columns, one or multiple rows, in an ellipse (carousel mode) or a single card at a time)
  • Stretching cards to View width/height
  • Sorting and filtering cards
  • Multiple card selection
  • Split presentation mode
  • In-place cell editing using various data editors
  • Runtime card field layout customization

Learn more...

Card View (CardView class)

Presents data records as cards, arranged down and then across. Card fields are always arranged in a single column.


Main features:

  • Basic card field arrangement (in a single column)
  • Arrangement of cards down and then across
  • Sorting and filtering cards
  • Multiple card selection
  • Split presentation mode
  • In-place cell editing using various data editors
  • Runtime card field layout customization (toggling card field visibility)

Learn more...

WinExplorer View (WinExplorerView class)

Displays records using one of seven styles supported by MS Windows Explorer - Small, Medium, Large, Extra Large, List, Tiles and Content.


Main features:

  • Seven data presentation formats - Small, Medium, Large, Extra Large, List, Tiles and Content
  • Context buttons
  • Sorting and filtering cards (in code)
  • Data grouping (by one column)
  • Disabling items based on data from a data source
  • Built-in item check boxes used to select items
  • Asynchronous image load
  • Multiple card selection
  • Split presentation mode

Learn more...

Tile View (TileView class)

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:

  • Arrangement of tile elements (columns) relative to the tile corners and other tile elements
  • Context buttons
  • Sorting and filtering tiles (in code)
  • Data grouping (by one column)
  • Disabling tiles based on data from a data source
  • Tile check marks
  • Editing in a modal edit form
  • Kanban tile presentation mode
  • Asynchronous image load
  • Split presentation mode

Learn more...

Expanded 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.

Expanded 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:

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.

Expanded 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.

Expanded 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.

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.

Expanded Example

The following example replaces the existing top level View with a BandedGridView, and adds a band and column to the View.

Expanded 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).

Expanded Learn More

More information on the features and related options provided by data grid Views is covered in the following sections.

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