Bind DataGridView to a Data Source
- 6 minutes to read
You can bind a DataGridView to a data source and then populate column cells with retrieved source data.
To show data in a grid and allow users to manage it, use the DataGridView.ItemsSource property to bind the grid to a data source.
To create data columns, populate the DataGridView.Columns collection with GridColumn descendants. Specify the FieldName property for each individual column to define which data source property contains data for this column.
For more information about columns and supported columns types, refer to the following help topic: Columns and Rows.
The following example binds a DataGridView to a collection of Employee objects - EmployeeData.
<ContentPage ...
xmlns:dxg="clr-namespace:DevExpress.Maui.DataGrid;assembly=DevExpress.Maui.DataGrid"
xmlns:local="clr-namespace:DataGridExample.ViewModels">
<ContentPage.BindingContext>
<local:EmployeeDataViewModel/>
</ContentPage.BindingContext>
<dxg:DataGridView ItemsSource="{Binding Employees}">
<dxg:DataGridView.Columns>
<dxg:ImageColumn FieldName="Photo" />
<dxg:TemplateColumn FieldName="Name" >
</dxg:TemplateColumn>
<dxg:TextColumn FieldName="Phone"/>
<dxg:TextColumn FieldName="Address"/>
<dxg:DateColumn FieldName="BirthDate"/>
<dxg:ComboBoxColumn FieldName="Access"/>
<dxg:CheckBoxColumn FieldName="OnVacation"/>
</dxg:DataGridView.Columns>
</dxg:DataGridView>
</ContentPage>
using System.Collections.Generic;
using System.ComponentModel;
namespace DataGridExample {
public class EmployeeDataViewModel : INotifyPropertyChanged {
readonly EmployeeData data;
public event PropertyChangedEventHandler PropertyChanged;
public IReadOnlyList<Employee> Employees { get => data.Employees; }
public EmployeeDataViewModel() {
data = new EmployeeData();
}
protected void RaisePropertyChanged(string name) {
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(name));
}
}
}
using System.Collections.ObjectModel;
using Microsoft.Maui.Controls;
using System;
namespace DataGridExample {
public enum AccessLevel {
Admin,
User
}
public class Employee {
string name;
string resourceName;
public string Name {
get { return name; }
set {
name = value;
if (Photo == null) {
resourceName = "DataGridExample.Images." + value.Replace(" ", "_") + ".jpg";
if (!String.IsNullOrEmpty(resourceName))
Photo = ImageSource.FromResource(resourceName);
}
}
}
public Employee(string name) {
this.Name = name;
}
public ImageSource Photo { get; set; }
public DateTime BirthDate { get; set; }
public DateTime HireDate { get; set; }
public string Position { get; set; }
public string Address { get; set; }
public string Phone { get; set; }
public AccessLevel Access { get; set; }
public bool OnVacation { get; set; }
}
public class EmployeeData {
void GenerateEmployees() {
ObservableCollection<Employee> result = new ObservableCollection<Employee>();
result.Add(
new Employee("Nancy Davolio") {
BirthDate = new DateTime(1978, 12, 8),
HireDate = new DateTime(2005, 5, 1),
Position = "Sales Representative",
Address = "98122, 507 - 20th Ave. E. Apt. 2A, Seattle WA, USA",
Phone = "(206) 555-9857",
Access = AccessLevel.User,
OnVacation = false
}
);
result.Add(
new Employee("Andrew Fuller") {
BirthDate = new DateTime(1965, 2, 19),
HireDate = new DateTime(1992, 8, 14),
Position = "Vice President, Sales",
Address = "98401, 908 W. Capital Way, Tacoma WA, USA",
Phone = "(206) 555-9482",
Access = AccessLevel.Admin,
OnVacation = false
}
);
result.Add(
new Employee("Janet Leverling") {
BirthDate = new DateTime(1985, 8, 30),
HireDate = new DateTime(2002, 4, 1),
Position = "Sales Representative",
Address = "98033, 722 Moss Bay Blvd., Kirkland WA, USA",
Phone = "(206) 555-3412",
Access = AccessLevel.User,
OnVacation = false
}
);
result.Add(
new Employee("Margaret Peacock") {
BirthDate = new DateTime(1973, 9, 19),
HireDate = new DateTime(1993, 5, 3),
Position = "Sales Representative",
Address = "98052, 4110 Old Redmond Rd., Redmond WA, USA",
Phone = "(206) 555-8122",
Access = AccessLevel.User,
OnVacation = false
}
);
result.Add(
new Employee("Steven Buchanan") {
BirthDate = new DateTime(1955, 3, 4),
HireDate = new DateTime(1993, 10, 17),
Position = "Sales Manager",
Address = "SW1 8JR, 14 Garrett Hill, London, UK",
Phone = "(71) 555-4848",
Access = AccessLevel.User,
OnVacation = true
}
);
result.Add(
new Employee("Michael Suyama") {
BirthDate = new DateTime(1981, 7, 2),
HireDate = new DateTime(1999, 10, 17),
Position = "Sales Representative",
Address = "EC2 7JR, Coventry House Miner Rd., London, UK",
Phone = "(71) 555-7773",
Access = AccessLevel.User,
OnVacation = false
}
);
result.Add(
new Employee("Robert King") {
BirthDate = new DateTime(1960, 5, 29),
HireDate = new DateTime(1994, 1, 2),
Position = "Sales Representative",
Address = "RG1 9SP, Edgeham Hollow Winchester Way, London, UK",
Phone = "(71) 555-5598",
Access = AccessLevel.User,
OnVacation = false
}
);
result.Add(
new Employee("Laura Callahan") {
BirthDate = new DateTime(1985, 1, 9),
HireDate = new DateTime(2004, 3, 5),
Position = "Inside Sales Coordinator",
Address = "98105, 4726 - 11th Ave. N.E., Seattle WA, USA",
Phone = "(206) 555-1189",
Access = AccessLevel.User,
OnVacation = true
}
);
result.Add(
new Employee("Anne Dodsworth") {
BirthDate = new DateTime(1980, 1, 27),
HireDate = new DateTime(2004, 11, 15),
Position = "Sales Representative",
Address = "WG2 7LT, 7 Houndstooth Rd., London, UK",
Phone = "(71) 555-4444",
Access = AccessLevel.User,
OnVacation = false
}
);
Employees = result;
}
public ObservableCollection<Employee> Employees { get; private set; }
public EmployeeData() {
GenerateEmployees();
}
}
}
For a step-by-step tutorial on how to bind a DataGridView to a data source, refer to the following help topic: Get Started with DevExpress Data Grid for .NET MAUI.
Generate Columns Automatically
The DataGridView can automatically generate columns based on a bound data source. You can set the AutoGenerateColumnsMode property None to prevent columns from automatically being generated.
Enable Data Refresh
If the bound ItemsSource implements the INotifyCollectionChanged interface, DataGridView refreshes itself when new items appear or existing items are removed from the source. An example of such sources includes ObservableCollection<T>.
If your data objects implement the INotifyPropertyChanged interface, you can enable the DataGridView.AllowLiveDataShaping option to make the grid refresh itself once data object values change. The grid also reshapes its data: changes the sort order, applies filter conditions, calculates summaries, and carries out other necessary updates.
Bind to Large Data
If you need to display a large data in the DataGridView, you can to not load all data at once. You can load data by portions in asynchronous mode once a user scrolls to the bottom of the DataGridView. The scroll to the bottom action makes the DataGridView to add a set of new data items to the end of the DataGridView.
For more information on how to implement this functionality in a DataGridView, refer to the following help topic: Load More.
Unbound Data
Instead of retrieving data directly from a source, you can calculate column data based on values of other columns. For more information, refer to the following section: Unbound columns.
Note that unbound mode (which adds and saves records directly to a grid) is not supported and the grid cannot operate without a data source.
Perform Create-Read-Update-Delete Operations
You can perform CRUD (Create-Read-Update-Delete) operations over Data Grid View rows. For more information, refer to the following help topic: CRUD Operations in a Data-Bound Data Grid View for .NET MAUI.
Examples
The following examples display data from different sources in a DataGridView: