Controls / DataGrid / Columns

.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:

Telerik Maui Ninja image

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.

Download Free Trial

  • Manually: by adding columns to the RadDataGrid.Columns collection
  • Automatically: by setting RadDataGrid.AutoGenerateColumns="True"
  • Mixed: by adding columns to the RadDataGrid.Columns collection and also set RadDataGrid.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 extended DataGridTextColumn that presents numerical data (int and double types).
  • Boolean Column: A special DataGridTypedColumn implementation that presents Boolean data.
  • Date Column: An extended DataGridTextColumn that presents data of type DateTime.
  • Time Column: Represents an extended DataGridTextColumn that presents the TimeOfDay of a DateTime type.
  • ComboBox Column: Represents an extended DataGridTextColumn that uses a Picker editor to select value from a collection.
  • Template Column: Represents a column that uses a DataTemplate to describe the content of each associated grid cell.

When RadDataGrid.AutoGenerateColumns="True", the RadDataGrid 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 the DataGridColumnHeader control.
  • HeaderContentTemplate(DataTemplate)—Specifies the DataTemplate 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 the Style 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 the DataGridColumnSizeMode 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 the SizeMode property is set to DataGridColumnSizeMode.Fixed.
  • MinimumWidth(double)—Specifies the minimum width of a column. This property is applicable when setting SizeMode column property to Fixed. When Minimumwidth is set, you can not reduce the width of the column to a value lower than the MinimumWidth.
  • ActualWidth(double)—Gets the actual width of the column.
  • IsResizable(bool)—Specifies whether the user can resize the DataGrid Column. The default value is True. This is only supported in WinUI and MacCatalyst.
  • 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 the StyleSelector 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. The CellEditTemplate is displayed when the cell is in edit mode.
  • IsFrozen(bool)—Specifies whether the column is frozen. The default value is False.
  • IsResizable(bool)—Specifies whether the user can resize the DataGrid Column. The default value is True. This is only supported in WinUI and MacCatalyst.

More information about CellDecorationStyle and CellDecorationStyleSelector can be found in Columns Styling topic.

More information about CellContentTemplate and CellEditTemplate 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
5. And the 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.

See Also

In this article
Related articles
Not finding the help you need? Improve this article