Controls / DataGrid / Columns

.NET MAUI DataGrid Defining Columns

The Telerik UI for .NET MAUI DataGrid provides 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

  • Automatically—by setting AutoGenerateColumns property to True (default value).
  • Manually—by adding columns to the DataGrid's Columns collection and setting the AutoGenerateColumns property to False.
  • Mixed—by adding columns to the Columns collection and also setting the AutoGenerateColumnsto True (default value).

Automatic Columns Generation

By default, the DataGrid will generate typed columns automatically based on the underlying data type. When, for example, you set the ItemsSource of the RadDataGrid to a collection of clubs (see the sample code below), the control will create a separate column for each public property of the Club object.

For example, let's have a sample Club object:

public class Club
{ 
    public string Name { get; set; }
    public DateTime Established { get; set; }
    public bool IsChampion { get; set; }
}

With the automatic columns generation DataGrid will create the following columns:

  • DataGridTextColumn for the Name property.
  • DataGridDateColumn for the Established property.
  • DataGridBooleanColumn for the IsChampion property.

Manual Columns Definition

Using the built-in auto generation of columns does not fit all scenarios. In such cases you can manually define the needed columns. When defining a column you can choose between several column types:

  • 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—An extended DataGridTextColumn 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 which cell value editor is a Telerik.Maui.Controls.RadComboBox control.
  • Template Column—Represents a column that uses a DataTemplate to describe the content of each associated grid cell.
  • ToggleRowDetails Column—Represents a column that allows the user to show and hide the row details for an item.

For the typed columns (Text, Numerical, Boolean, Date, Time and ComboBox) you can define which property of the underlying data object the column represents in the following ways:

  • PropertyName—Specifies the name of the property of the data object being displayed in the column's cells.
  • DataMemberBinding—Defines the binding which points to the data member of the underlying object being displayed in the column's cell. With DataMemberBinding, you have control over the way data is formatted and displayed in the DataGrid cells, for example you can add a string formatter or a value converter.

The example below demonstrates RadDataGrid with various types of columns. In addition both PropertyName and DataMemberBinding are used for the different columns to set the property each column represents.

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>
                <Style TargetType="telerik:DataGridTextCellAppearance">
                    <Setter Property="TextColor" Value="#018383" />
                    <Setter Property="SelectedTextColor" Value="#A55200" />
                    <Setter Property="FontSize" Value="15" />
                </Style>
            </telerik:DataGridTextColumn.CellContentStyle>
        </telerik:DataGridTextColumn>
        <telerik:DataGridNumericalColumn DataMemberBinding="{Binding StadiumCapacity, StringFormat='{0:N0}'}" 
                                         HeaderText="Stadium Capacity"/>
        <telerik:DataGridBooleanColumn DataMemberBinding="{Binding IsChampion, Converter={StaticResource BoolToValueConverter}}" 
                                       HeaderText="Champion"/>
        <telerik:DataGridDateColumn PropertyName="Established" 
                                    HeaderText="Date Established"/>
        <telerik:DataGridComboBoxColumn PropertyName="Championship"
                                        HeaderText="Championship"
                                        ItemsSourcePath="Championships"/>
        <telerik:DataGridTemplateColumn HeaderText="Location">
            <telerik:DataGridTemplateColumn.CellContentTemplate>
                <DataTemplate>
                    <Grid>
                        <VerticalStackLayout InputTransparent="True">
                            <Label Text="{Binding Country}"
                                       TextColor="#009688"
                                       Margin="0, 5, 0, 5"
                                       HorizontalOptions="Center"
                                       VerticalTextAlignment="Center"/>
                            <Label Text="{Binding City}"
                                   TextColor="#80CBC4"
                                   HorizontalOptions="Center"
                                   VerticalTextAlignment="Center"
                                   FontSize="12"/>
                        </VerticalStackLayout>
                    </Grid>
                </DataTemplate>
            </telerik:DataGridTemplateColumn.CellContentTemplate>
        </telerik:DataGridTemplateColumn>
        <telerik:DataGridNumericalColumn DataMemberBinding="{Binding Path=Revenue, StringFormat='{0:C}', TargetNullValue='N/A'}"
                                         HeaderText="Revenue (in millions)"/>
    </telerik:RadDataGrid.Columns>
</telerik:RadDataGrid>

2. Where the telerik 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), 54074, "England", "Liverpool", "Premier League", null),
            new Club("Manchester Utd.", new DateTime(1878, 1, 1), 74310, "England", "Manchester", "Premier League", 594.3) { IsChampion = true },
            new Club("Chelsea", new DateTime(1905, 1, 1), 42055, "England", "London","UEFA Champions League", 481.3),
            new Club("Barcelona", new DateTime(1899, 1, 1), 99354, "Spain", "Barcelona", "La Liga", 540.5)
        };
    }
}

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 int stadiumCapacity;
    private bool isChampion;
    private string country;
    private string city;
    private string championship;
    private double? revenue;

    public Club(string name, DateTime established, int stadiumCapacity, string country, string city, string championship, double? revenue)
    {
        Name = name;
        Established = established;  
        StadiumCapacity = stadiumCapacity;
        Country = country;
        City = city;
        Championship = championship;
        Revenue = revenue;
    }

    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 int StadiumCapacity
    {
        get { return this.stadiumCapacity; }
        set { this.UpdateValue(ref this.stadiumCapacity, value); }
    }

    public bool IsChampion
    {
        get { return this.isChampion; }
        set { this.UpdateValue(ref this.isChampion, value); }
    }

    public string Country
    {
        get { return this.country; }
        set { this.UpdateValue(ref this.country, value); }
    }

    public string City
    {
        get { return this.city; }
        set { this.UpdateValue(ref this.city, value); }
    }

    public string Championship       
    {
        get { return this.championship; }
        set { this.UpdateValue(ref this.championship, value); }
    }

    public double? Revenue
    {
        get { return this.revenue; }
        set { this.UpdateValue(ref this.revenue, value); }
    }

    public List<string> Championships => new List<string> { "UEFA Champions League", "Premier League", "La Liga" };
}

6. Add the BoolToValueConverter to the page's resources:

<telerik:BoolToValueConverter x:Key="BoolToValueConverter" FalseValue="No" TrueValue="Yes" />

Check the result in the image below:

Telerik .NET MAUI DataGrid Defining Columns

For a runnable example with the DataGrid columns, see the SDKBrowser Demo Application and go to the DataGrid > Columns category.

Columns Features

Find below a quick overview of the DataGrid's Columns features.

Column Headers

The top cell of a column is called Header. Its purpose is to set a caption for the column, which describes the data displayed in it. The .NET MAUI DataGrid provides fully customizable column headers, check Column Headers for detailed information.

Columns Cell Templates

The DataGrid provides a set of predefined column types such as Text Column, Numerical Column, etc. In case you need to extend the functionality of a column, for example customize the default appearance or add more UI elements, use the exposed templates - CellContentTemplate and CellEditTemplate. For detailed information, see the Columns Cells Templates topic.

Column Footers

The DataGrid allows you to display additional information which applies to the columns in a specific row placed at the bottom of the control. This row consists of individual footer cells for each column. Take a look at the Column Footers for detailed information.

Column Resizing

Columns inside the Telerik .NET MAUI DataGrid are resizable by default. The feature is available only on Desktop - WinUI and MacCatalyst. For more details see the Column Resizing topic.

Columns Width

The DataGrid provides a flexible mechanism for setting columns' width through columns' SizeMode and Width properties. For more details see the Columns Width topic.

Frozen Columns

You can pin a column on the left side of the DataGrid by setting the IsFrozen property to the column. By default the value is False. When setting it to True to a concrete column, it makes the column frozen. For detailed information, see the Frozen Columns topic.

Columns Reordering

The DataGrid exposes a reordering feature allowing the user to drag and drop columns and change their order. For more details, see the Columns Reordering topic.

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