Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]Welcome to DevExpress .NET Documentation
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
   Reporting
  [Collapse]Data Grid
   [Collapse]Getting Started
     Lesson 1 - Adding GridControl to a Project
     Lesson 2 - Data Editing and Displaying
     Lesson 3 - Data Management
     Lesson 4 - Grid Summaries
     Lesson 5 - Setup Master-Detail Hierarchy
   [Expand]Implementation Details
   [Expand]Views
   [Expand]Grid View Data Layout
   [Expand]Binding to Data
   [Expand]Master-Detail Data Representation
   [Expand]Data Editing and Validation
   [Expand]Grouping
   [Expand]Selection
   [Expand]Filtering and Searching
   [Expand]Sorting
   [Expand]Data Summaries
   [Expand]Data Scrolling
   [Expand]Focus and Navigation
   [Expand]Conditional Formatting
   [Expand]Drag-and-Drop
   [Expand]Appearance Customization
   [Expand]MVVM Enhancements
   [Expand]Printing and Exporting
   [Expand]End-User Interaction
   [Expand]Miscellaneous
   [Expand]Performance Improvement
   [Expand]Design-Time Features
   [Expand]Visual Elements
   [Expand]End-User Capabilities
   [Expand]Examples
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Printing-Exporting
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Diagram Control
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
 [Expand]Localization
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[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

Lesson 1 - Adding GridControl to a Project

This tutorial demonstrates how to add a GridControl to your project and bind the control to your data source.

Expanded Add a data model

The grid control cannot operate without a data source. It can be bound to data from a database, from an XML file or to any data created at runtime. The grid control can be bound to any object that implements the System.Collections.IEnumerable interface or its descendant (e.g. IList, ICollection). To bind a grid, assign a data source to the ItemsSource property.

Tip

To learn more about various approaches of binding grids to data, see Binding to Data Overview.

The code sample below demonstrates a simple data model (the Customer class) that is used in this tutorial.

Model code:

Expanded Add a ViewModel

Create a ViewModel class that will expose the Customers field of the List<Customer> type.

ViewModel code:

Build the solution. Invoke the main window smart tag and define its data context like it is shown in the image below.

Expanded Add GridControl to the view

Add the GridControl to the main window of your project.

To do this, open the Visual Studio toolbox, find the DX.17.2: Data & Analytics tab, and drag the GridControl toolbox item to the window.

Right-click the GridControl and select Layout - Reset All to fill the entire window.

The following code will be generated.

To bind the grid control to data, invoke the GridControl's smart tag, and define the ItemsSource field like it is shown in the image below.

Tip

The grid control can display your data as a set of table rows, cards or tree nodes. See the Views topic to learn more about GridControl views. In this tutorial, the Table View is used by default.

The code example below demonstrates the generated code.

Expanded Get the Result

Run the solution. The image below demonstrates the result.

Expanded Next Steps

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