Lesson 1 - Adding GridControl to a Project
- 4 minutes to read
This tutorial demonstrates how to add a GridControl to your project and bind the control to your data source.
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:
using System;
using System.Collections.Generic;
namespace DxGridGettingStarted {
public class Customer {
public string Name { get; set; }
public string City { get; set; }
public int Visits { get; set; }
public DateTime? Birthday { get; set; }
public static List<Customer> GetCustomers() {
List<Customer> people = new List<Customer>();
people.Add(new Customer() { Name = "Gregory S. Price", City = "Huntington", Visits = 4, Birthday = new DateTime(1980, 1, 1) });
people.Add(new Customer() { Name = "Irma R. Marshall", City = "Hong Kong", Visits = 2, Birthday = new DateTime(1966, 4, 15) });
people.Add(new Customer() { Name = "John C. Powell", City = "Luogosano", Visits = 6, Birthday = new DateTime(1982, 3, 11) });
people.Add(new Customer() { Name = "Christian P. Laclair", City = "Clifton", Visits = 11, Birthday = new DateTime(1977, 12, 5) });
people.Add(new Customer() { Name = "Karen J. Kelly", City = "Madrid", Visits = 8, Birthday = new DateTime(1956, 9, 5) });
people.Add(new Customer() { Name = "Brian C. Cowling", City = "Los Angeles", Visits = 5, Birthday = new DateTime(1990, 2, 27) });
people.Add(new Customer() { Name = "Thomas C. Dawson", City = "Rio de Janeiro", Visits = 21, Birthday = new DateTime(1965, 5, 5) });
people.Add(new Customer() { Name = "Angel M. Wilson", City = "Selent", Visits = 8, Birthday = new DateTime(1987, 11, 9) });
people.Add(new Customer() { Name = "Winston C. Smith", City = "London", Visits = 1, Birthday = new DateTime(1949, 6, 18) });
people.Add(new Customer() { Name = "Harold S. Brandes", City = "Bangkok", Visits = 3, Birthday = new DateTime(1989, 1, 8) });
people.Add(new Customer() { Name = "Michael S. Blevins", City = "Harmstorf", Visits = 4, Birthday = new DateTime(1972, 9, 14) });
people.Add(new Customer() { Name = "Jan K. Sisk", City = "Naples", Visits = 6, Birthday = new DateTime(1989, 5, 7) });
people.Add(new Customer() { Name = "Sidney L. Holder", City = "Watauga", Visits = 19, Birthday = new DateTime(1971, 10, 3) });
return people;
}
}
}
Add a ViewModel
Create a ViewModel class that will expose the Customers field of the List<Customer> type.
ViewModel code:
using System.Collections.Generic;
namespace DxGridGettingStarted {
public class MainWindowViewModel {
public MainWindowViewModel() {
this.Customers = Customer.GetCustomers();
}
public List<Customer> Customers { get; set; }
}
}
Build the solution. Invoke the main window smart tag and define its data context like it is shown in the image below.
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.19.1: 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.
<Window xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:DxGridGettingStarted"
x:Class="DxGridGettingStarted.MainWindow"
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<local:MainWindowViewModel/>
</Window.DataContext>
<Grid>
<dxg:GridControl AutoGenerateColumns="AddNew" EnableSmartColumnsGeneration="True">
<dxg:GridControl.View>
<dxg:TableView AllowPerPixelScrolling="True" ShowTotalSummary="True"/>
</dxg:GridControl.View>
</dxg:GridControl>
</Grid>
</Window>
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.
<Window xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:DxGridGettingStarted"
x:Class="DxGridGettingStarted.MainWindow"
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<local:MainWindowViewModel/>
</Window.DataContext>
<Grid>
<dxg:GridControl AutoGenerateColumns="AddNew" EnableSmartColumnsGeneration="True" ItemsSource="{Binding Customers}">
<dxg:GridControl.View>
<dxg:TableView AllowPerPixelScrolling="True" ShowTotalSummary="True"/>
</dxg:GridControl.View>
</dxg:GridControl>
</Grid>
</Window>
Get the Result
Run the solution. The image below demonstrates the result.
Next Steps
Lesson 2 - Data Editing and Displaying