Get Started with DevExpress Data Grid for .NET MAUI
- 8 minutes to read
This example allows you to get started with the DataGridView component – bind it to a data source and configure its columns.
Prerequisites
Refer to the following pages before you proceed with this Getting Started lesson:
- Microsoft .NET Multi-platform App UI documentation
- .NET MAUI and DevExpress Mobile UI Supported Platforms
- Requirements for .NET MAUI and DevExpress Mobile UI
- Get Started with DevExpress Controls for .NET Multi-platform App UI (.NET MAUI)
1. Create a New .NET MAUI Application and Add a Data Grid
Create a new .NET MAUI solution.
Refer to the following topic for more information on how to get started with .NET MAUI: Microsoft .NET Multi-platform App UI documentation.
Remove default content from the main page (MainPage.xaml) and event handlers from the code-behind file (MainPage.xaml.cs). Clear the application’s resource dictionary (App.xaml).
Install the DevExpress.Maui.DataGrid package from your DevExpress NuGet feed.
In the MauiProgram.cs file, call the the following UseDevExpress* methods to register handlers for the DevExpress DataGrid control:
using DevExpress.Maui; using Microsoft.Maui.Controls.Hosting; using Microsoft.Maui.Hosting; namespace DataGridExample { public static class MauiProgram { public static MauiApp CreateMauiApp() { var builder = MauiApp.CreateBuilder(); builder .UseDevExpress(useLocalization: false) .UseDevExpressCollectionView() .UseDevExpressControls() .UseDevExpressEditors() .UseDevExpressDataGrid() .UseMauiApp<App>() .ConfigureFonts(fonts => { fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); }); return builder.Build(); } } }In the MainPage.xaml file, use the dx prefix to declare the
http://schemas.devexpress.com/mauicommon namespace and add a DataGridView object to the ContentPage:<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:dx="http://schemas.devexpress.com/maui" x:Class="DataGridExample.MainPage"> <dx:DataGridView/> </ContentPage>
2. Create a Data Source
In this example, the grid is bound to a collection of Employee objects - EmployeeData. Create a Model.cs file with the following classes:
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();
}
}
}
Create a ViewModel.cs file and add a view model class:
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));
}
}
}
3. Bind the Grid to Data
In the MainPage.xaml file:
- Assign an
EmployeeDataViewModelobject to theContentPage.BindingContextproperty. - Bind the DataGridView.ItemsSource property to the employee collection object that the
EmployeeDataViewModel.Employeesproperty returns.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:dx="http://schemas.devexpress.com/maui"
xmlns:local="clr-namespace:DataGridExample.ViewModels"
x:Class="DataGridExample.MainPage">
<ContentPage.BindingContext>
<local:EmployeeDataViewModel/>
</ContentPage.BindingContext>
<dx:DataGridView ItemsSource="{Binding Employees}">
</dx:DataGridView>
</ContentPage>
4. Specify Grid Columns
Do the following to specify a collection of grid columns:
- Create column objects and use the FieldName property to bind each column to a data source field.
- Add columns to the DataGridView.Columns collection in the order you want them to be displayed in the grid.
This tutorial creates the following grid columns:
- Photo (ImageColumn) – displays photos of employees. Add images to a project as embedded resources.
Employee (TemplateColumn) – displays names, positions, and hire dates of employees.
Assign a template to the TemplateColumn.DisplayTemplate property to define the appearance of column cells. Each cell contains a Microsoft.Maui.Controls.Grid with three Microsoft.Maui.Controls.Label elements bound to the Name, Position, and HireDate properties of the Employee class.
The CellData object specifies a binding context for a cell template. Its CellData.Value property returns a value of a data field assigned to the column’s FieldName property. In this example, a column cell displays not only this field value but also the values of two more fields. Use the CellData.Item property to access the whole data row object (Employee) and bind its properties to properties of labels defined in the template.
- Phone and Address (TextColumn) – display phone numbers and addresses of employees. The keyboard for text input appears when a user activates a cell to edit an employee’s phone number or address.
- Birth Date (DateColumn) – displays birth dates of employees and allows users to edit dates.
- Access Level (ComboBoxColumn) – displays employee access level and allows a user to select between predefined values (Admin or User) to change a cell value.
- On Vacation (CheckBoxColumn) – specifies whether an employee is on leave. This column displays checkboxes in cells to display and manage Boolean values.
Use the DataGridView.EditorShowMode property to specify a gesture that invokes an in-place editor for a cell. The grid automatically defines an editor type depending on the type of a column to which a cell belongs (except for TemplateColumn).
<dx:DataGridView ItemsSource="{Binding Employees}"
EditorShowMode="DoubleTap">
<dx:DataGridView.Columns>
<dx:ImageColumn FieldName="Photo" Width="100"/>
<dx:TemplateColumn FieldName="Name" Caption="Employee" MinWidth="200">
<dx:TemplateColumn.DisplayTemplate>
<DataTemplate>
<Grid VerticalOptions="Center" Padding="15, 0, 0, 0" RowDefinitions="Auto, Auto, Auto">
<Label Text="{Binding Item.Name}" FontSize="18" FontAttributes="Bold"
TextColor="{DynamicResource GridCellFontColor}" Grid.Row="0" />
<Label Text="{Binding Item.Position, StringFormat = 'Job Title: {0}'}"
FontSize="Small" TextColor="{DynamicResource GridCellFontColor}"
Grid.Row="1"/>
<Label Text="{Binding Item.HireDate, StringFormat = 'Hire Date: {0:d}'}"
FontSize="Small" TextColor="{DynamicResource GridCellFontColor}"
Grid.Row="2" />
</Grid>
</DataTemplate>
</dx:TemplateColumn.DisplayTemplate>
</dx:TemplateColumn>
<dx:TextColumn FieldName="Phone"
MinWidth="130" VerticalContentAlignment="Center" />
<dx:TextColumn FieldName="Address"
MinWidth="150" VerticalContentAlignment="Center" />
<dx:DateColumn FieldName="BirthDate"
MinWidth="120" DisplayFormat="d" VerticalContentAlignment="Center"/>
<dx:ComboBoxColumn FieldName="Access" Caption="Access Level"
MinWidth="140" VerticalContentAlignment="Center"/>
<dx:CheckBoxColumn FieldName="OnVacation"
MinWidth="130" VerticalContentAlignment="Center"/>
</dx:DataGridView.Columns>
</dx:DataGridView>
5. Enable Drag-and-Drop
The DataGridView supports drag-and-drop operations and allows users to reorder rows. Users should touch and hold a data row and then drag and drop the row to another position.
To enable drag-and-drop operations, set the AllowDragDropRows property to True.
<dx:DataGridView ItemsSource="{Binding Employees}"
EditorShowMode="DoubleTap"
AllowDragDropRows="True">
<!-- Grid columns are here. -->
</dx:DataGridView>