.NET MAUI DataGrid Columns
You can add columns in your RadDataGrid
by working with the Columns collection of the control. It has three approaches that you can take to define different columns:
The Columns is part of Telerik UI for .NET MAUI, the most comprehensive UI suite for .NET MAUI! To try it out, sign up for a free 30-day trial and kickstart your cross-platform app development today.
-
Manually
: by adding columns to theRadDataGrid.Columns
collection -
Automatically
: by settingRadDataGrid.AutoGenerateColumns="True"
-
Mixed
: by adding columns to theRadDataGrid.Columns
collection and also setRadDataGrid.AutoGenerateColumns="True"
The RadDataGrid
control provides the following type of columns:
-
Text Column
: Represents a column that converts the content of each associated cell to a System.String object. -
Numerical Column
: Represents an extendedDataGridTextColumn
that presents numerical data (int
anddouble
types). -
Boolean Column
: A specialDataGridTypedColumn
implementation that presents Boolean data. -
Date Column:
An extendedDataGridTextColumn
that presents data of typeDateTime
. -
Time Column
: Represents an extendedDataGridTextColumn
that presents theTimeOfDay
of aDateTime
type. -
ComboBox Column
: Represents an extendedDataGridTextColumn
that uses a Picker editor to select value from a collection. -
Template Column
: Represents a column that uses aDataTemplate
to describe the content of each associated grid cell.
When
RadDataGrid.AutoGenerateColumns
="True", theRadDataGrid
generates typed columns depending on the underlying data type.
Properties
All types of columns inherit from the DataGridColumn
class which provides the following properties:
-
HeaderText
(string
)—Specifies the content to be displayed in the Header UI that represents the column. -
HeaderStyle
(DataGridColumnHeaderStyle
)—Specifies the Style instance that defines the appearance of theDataGridColumnHeader
control. -
HeaderContentTemplate
(DataTemplate
)—Specifies theDataTemplate
instance that defines the appearance of the header. -
FooterText
—Defines the content that will be displayed in the Footer UI that represents the column. -
FooterStyle
(DataGridColumnFooterStyle
)—Defines theStyle
object that sets the appearance of each footer cell associated with this column. -
FooterContentTemplate
(DataTemplate
)—Defines the appearance of the footer. -
SizeMode
(DataGridColumnSizeMode
)—Gets or sets theDataGridColumnSizeMode
value that controls how the column and its associated cells are sized horizontally.- Fixed—The column has a fixed width as defined by its Width property.
- Stretch—The column is stretched to the available width proportionally to its desired width.
- Auto—The columns is sized to its desired width. That is the maximum desired width of all associated cells.
-
Width
(double
)—Specifies the fixed width for the column. Applicable when theSizeMode
property is set toDataGridColumnSizeMode.Fixed
. -
MinimumWidth
(double
)—Specifies the minimum width of a column. This property is applicable when settingSizeMode
column property toFixed
. WhenMinimumwidth
is set, you can not reduce the width of the column to a value lower than theMinimumWidth
. -
ActualWidth
(double
)—Gets the actual width of the column. -
IsResizable
(bool
)—Specifies whether the user can resize the DataGrid Column. The default value isTrue
. This is only supported inWinUI
andMacCatalyst
. -
IsAutoGenerated
(bool)—Gets a value indication whether the column is auto-generated internally. -
CanUserEdit
(bool
)—Specifies whether the user can edit the values in this column. -
CanUserFilter
(bool
)—Specifies whether the user can filter this column by using the built-in Filtering UI. -
CanUserSort
(bool
)—Specifies whether the user can sort the data by the values in this column. -
IsVisible
(bool
)—Gets a value indicating if a specific column should be visualized. -
CellDecorationStyle
(DataGridBorderStyle
)—Defines the Style object that defines the background of each cell associated with this column. -
CellDecorationStyleSelector
(DataGridStyleSelector): Defines theStyleSelector
instance that allows for dynamic decoration on a per cell basis. -
CellContentTemplate
(DataTemplate
)—Defines the appearance of each cell associated with concrete column. -
CellEditTemplate
(DataTemplate
)—Defines the editor associated with the concrete column. TheCellEditTemplate
is displayed when the cell is in edit mode. -
IsFrozen
(bool
)—Specifies whether the column is frozen. The default value isFalse
. -
IsResizable
(bool
)—Specifies whether the user can resize the DataGrid Column. The default value isTrue
. This is only supported inWinUI
andMacCatalyst
.
More information about
CellDecorationStyle
andCellDecorationStyleSelector
can be found in Columns Styling topic.
More information about
CellContentTemplate
andCellEditTemplate
can be found in Columns Styling topic.
To enable the user edit mode of the
RadDataGrid
cell, set the RadDataGrid.UserEditMode="Cell".
Example with DataGrid Columns
Here is an example containing all types of columns RadDataGrid
control provides.
1. Use the following snippet to declare a RadDataGrid
in XAML:
<telerik:RadDataGrid x:Name="grid"
ItemsSource="{Binding Clubs}"
AutoGenerateColumns="False">
<telerik:RadDataGrid.BindingContext>
<local:ViewModel />
</telerik:RadDataGrid.BindingContext>
<telerik:RadDataGrid.Columns>
<telerik:DataGridTextColumn PropertyName="Name"
HeaderText="Name">
<telerik:DataGridTextColumn.CellContentStyle>
<telerik:DataGridTextCellStyle TextColor="Green"
FontSize="15"
SelectedTextColor="Orange" />
</telerik:DataGridTextColumn.CellContentStyle>
</telerik:DataGridTextColumn>
<telerik:DataGridNumericalColumn PropertyName="StadiumCapacity"
HeaderText="Stadium Capacity"/>
<telerik:DataGridBooleanColumn PropertyName="IsChampion"
HeaderText="Champion?"/>
<telerik:DataGridDateColumn PropertyName="Established"
HeaderText="Date Established"/>
<telerik:DataGridComboBoxColumn PropertyName="Country"
HeaderText="Country"
ItemsSourcePath="Countries"/>
<telerik:DataGridTemplateColumn HeaderText="Template Column">
<telerik:DataGridTemplateColumn.CellContentTemplate>
<DataTemplate>
<Grid>
<VerticalStackLayout InputTransparent="True">
<Grid BackgroundColor="Orange"
Margin="0, 10, 0, 0">
<Label Text="{Binding Country}"
Margin="0, 5, 0, 5"
HorizontalOptions="Center"
VerticalTextAlignment="Center" />
</Grid>
<Label Text="Some Custom Text"
TextColor="DarkGreen"
FontSize="10" />
</VerticalStackLayout>
</Grid>
</DataTemplate>
</telerik:DataGridTemplateColumn.CellContentTemplate>
</telerik:DataGridTemplateColumn>
<telerik:DataGridTimeColumn PropertyName="Time"
HeaderText="Time Column"/>
</telerik:RadDataGrid.Columns>
</telerik:RadDataGrid>
2. Where the telerikDataGrid
namespace is the following:
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
3. The ViewModel
class is declared as following:
public class ViewModel
{
private ObservableCollection<Club> clubs;
public ObservableCollection<Club> Clubs => clubs ?? (clubs = CreateClubs());
private ObservableCollection<Club> CreateClubs()
{
return new ObservableCollection<Club>
{
new Club("UK Liverpool ", new DateTime(1892, 1, 1), new TimeSpan(3, 28, 33), 45362, "England"),
new Club("Manchester Utd.", new DateTime(1878, 1, 1), new TimeSpan(2, 56, 44), 76212, "England") { IsChampion = true },
new Club("Chelsea", new DateTime(1905, 1, 1), new TimeSpan(6, 19, 59), 42055, "England"),
new Club("Barcelona", new DateTime(1899, 1, 1), new TimeSpan(12, 25, 31), 99354, "Spain")
};
}
}
4. And the namespace used for NotifyPropertyChangedBase
:
using Telerik.Maui.Controls
Club
custom object:
public class Club : NotifyPropertyChangedBase
{
private string name;
private DateTime established;
private TimeSpan time;
private int stadiumCapacity;
private bool isChampion;
private string country;
public Club(string name, DateTime established, TimeSpan time, int stadiumCapacity, string country)
{
Name = name;
Established = established;
Time = time;
StadiumCapacity = stadiumCapacity;
Country = country;
}
public string Name
{
get { return this.name; }
set { this.UpdateValue(ref this.name, value); }
}
public DateTime Established
{
get { return this.established; }
set { this.UpdateValue(ref this.established, value); }
}
public TimeSpan Time
{
get { return this.time; }
set { this.UpdateValue(ref this.time, value); }
}
public int StadiumCapacity
{
get { return this.stadiumCapacity; }
set { this.UpdateValue(ref this.stadiumCapacity, value); }
}
public string Country
{
get { return this.country; }
set { this.UpdateValue(ref this.country, value); }
}
public bool IsChampion
{
get { return this.isChampion; }
set { this.UpdateValue(ref this.isChampion, value); }
}
public List<string> Countries => new List<string> { "England", "Spain", "France", "Bulgaria" };
}
For an outline of all DataGrid features review the .NET MAUI DataGrid Overview article.