Columns in MAUI DataGrid (SfDataGrid)

7 Jul 202618 minutes to read

The SfDataGrid allows a user to create and add columns in the following two ways:

• Automatically generating columns
• Manually defining columns

To get started quickly with column manipulation in .NET MAUI DataGrid, check this video tutorial:

Automatic columns generation

The SfDataGrid creates columns automatically based on the bindable property SfDataGrid.AutoGenerateColumnsMode. The columns are generated based on the type of individual properties in the underlying collection that is set as ItemsSource.

The table below shows the column type created for the respective data types. For the remaining data types, DataGridTextColumn will be created.

Data Type	Column
string, object	DataGridTextColumn
int, float, double, decimal and it’s respective nullable types	DataGridNumericColumn
DateTime	DataGridDateColumn
bool	DataGridCheckboxColumn
ImageSource	DataGridImageColumn

Auto-generation Modes

The auto generation of columns in SfDataGrid is controlled by the AutoGenerateColumnsMode property. The default value is AutoGenerateColumnsMode.Reset.

The following modes are available:

Modes	Description
None	Stores only the columns that are defined in SfDataGrid.Columns collection. When changing the ItemsSource and sorting for explicitly defined SfDataGrid.Columns alone will be retained.
Reset	Retains the columns defined explicitly in the application level and creates columns newly for all the other properties in a data source. When changing the ItemsSource and sorting for explicitly defined SfDataGrid.Columns alone will be retained.
ResetAll	When changing the ItemsSource, the columns for the previous data source are cleared and the columns will be newly created for the new data source. Even when columns are explicitly defined, it does not consider the defined columns and creates the column based on the underlying collection. Further when changing the ItemsSource and sorting for all the columns will be cleared.
RetainOld	When changing the ItemsSource, create columns for all fields in a data source when the DataGrid does not have any explicit definition for columns. When columns are defined explicitly, then the defined columns alone are retained and new columns are not created. Similarly, when changing the ItemsSource and when the DataGrid has an explicit definition for columns and sorting are retained as it is.
SmartReset	Retains the columns defined explicitly at the application level and the columns with MappingName identical to the properties in the new data source. Newly creates columns for all the other properties in the data source. Similarly, it retains the sorting of the columns that are defined explicitly at the application level and the columns with MappingName identical to the properties in the new data source.

Auto-generate Columns for Custom Types

By default, columns are auto-generated for custom type properties and parent properties of complex properties in the data object. For complex properties, use the AutoGenerateColumnsModeForCustomType property to control whether to auto-generate columns for the parent property, inner properties, or both:

• Parent: Only the parent property column is generated
• Child: Only the inner/nested property columns are generated
• Both: Both parent and nested property columns are generated

XAML

<syncfusion:SfDataGrid x:Name="dataGrid"
                       ItemsSource="{Binding Orders}"
                       AutoGenerateColumnsModeForCustomType="Both"
                       NavigationMode="Cell"
                       SelectionMode="Single">
</syncfusion:SfDataGrid>

C#

SfDataGrid dataGrid = new SfDataGrid();
OrderInfoViewModel orderInfoViewModel = new OrderInfoViewModel();
dataGrid.ItemsSource = orderInfoViewModel.Orders;
dataGrid.AutoGenerateColumnsModeForCustomType = AutoGenerateColumnsModeForCustomType.Both;
dataGrid.NavigationMode = DataGridNavigationMode.Cell;
dataGrid.SelectionMode = DataGridSelectionMode.Single;
this.Content = dataGrid;

Customize Auto-generated Columns

Auto-generated columns can be customized by handling the AutoGeneratingColumn event, which is raised when each column is auto-generated.

The DataGridAutoGeneratingColumnEventArgs object contains the following properties,

• Column: This property returns the created column which can be customized.
• Cancel: This property cancels the column creation.
• PropertyType: This property specifies the type of the underlying model property for which the column is created.

You can skip generating a column by handling the SfDataGrid.AutoGeneratingColumn event as follows,

XAML

<syncfusion:SfDataGrid x:Name="dataGrid"
                       ItemsSource="{Binding Orders}"
                       AutoGeneratingColumn="DataGrid_AutoGeneratingColumn">
</syncfusion:SfDataGrid>

C#

private void DataGrid_AutoGeneratingColumn(object sender, DataGridAutoGeneratingColumnEventArgs e)
{
    if (e.Column.MappingName == "Country")
    {
        e.Cancel = true;
    }
}

Example: Applying formatting to auto-generated columns using the event handler:

C#

SfDataGrid dataGrid = new SfDataGrid();
OrderInfoViewModel orderInfoViewModel = new OrderInfoViewModel();
dataGrid.ItemsSource = orderInfoViewModel.Orders;
dataGrid.AutoGeneratingColumn += DataGrid_AutoGeneratingColumn;
this.Content = dataGrid;

// Customizing the column format for UnitPrice and OrderDate columns
private void DataGrid_AutoGeneratingColumn(object sender, DataGridAutoGeneratingColumnEventArgs e)
{
    if (e.Column.MappingName == "UnitPrice")
    {
        e.Column.Format = "C";
    }
    else if (e.Column.MappingName == "OrderDate")
    {
        e.Column.Format = "MMMM dd";
    }
}

Customize Columns with Data Annotations

SfDataGrid can auto-generate and customize columns based on built-in Data Annotation Attributes.

Note: Data annotations are only applied when AutoGenerateColumnsMode is not set to None. Ensure your model class includes using System.ComponentModel.DataAnnotations; at the top.

Exclude column

You can skip the column generation using AutoGenerateField property.

C#

public class OrderInfo
{
    [Display(AutoGenerateField = false, Description = "OrderID field is not generated in UI")]
    public int OrderID { get; set; }

    public string Customer { get; set; }
    public string City { get; set; }
    public string Country { get; set; }
    public string Product { get; set; }
    public DateTime OrderDate { get; set; }
}

Editing

You can enable editing of cell values by setting the Editable attribute to true.

C#

public class OrderInfo
{
    public int OrderID { get; set; }
    public string Customer { get; set; }
    public string City { get; set; }

    [Editable(true)]
    public string Country { get; set; }

    public string Product { get; set; }
    public DateTime OrderDate { get; set; }
}

Change the HeaderText of column

You can customize header text of column using Display.Name property or Display.ShortName property.

C#

public class OrderInfo
{
    public int OrderID { get; set; }

    [Display(Name = "Name of the Customer", Description = "CustomerName is necessary for identification ")]
    public string Customer { get; set; }

    public string City { get; set; }
    public string Country { get; set; }
    public string Product { get; set; }
    public DateTime OrderDate { get; set; }
}

Reorder Columns

You can reorder columns using the Display.Order property. Columns are arranged by order value in ascending order, with lower values appearing first.

C#

public class OrderInfo
{
    [Display(Order = 1)]
    public int OrderID { get; set; }

    [Display(Order = 0)]
    public string Customer { get; set; }

    public string City { get; set; }
    public string Country { get; set; }
    public string Product { get; set; }
    public DateTime OrderDate { get; set; }
}

The OrderID and Customer column rearranged based on specified order.

Make Columns Read-Only

You can prevent editing of a column by applying the ReadOnly attribute.

C#

public class OrderInfo
{
    [ReadOnly(true)]
    public int OrderID { get; set; }

    public string Customer { get; set; }
    public string City { get; set; }

    [ReadOnly(true)]
    public string Country { get; set; }

    public string Product { get; set; }
}

Format Columns with DisplayFormat

You can format auto-generated columns using the DisplayFormat attribute with the DataFormatString property. The {0} placeholder represents the property value and follows standard .NET composite format strings.

C#

public class OrderInfo
{
    public int OrderID { get; set; }
    public string Customer { get; set; }

    [DisplayFormat(DataFormatString = "yyyy"), Display(Name = "Order Date")]
    public DateTime OrderDate { get; set; }

    [DisplayFormat(DataFormatString = "Country is {0}")]
    public string Country { get; set; }
}

Group Columns Under Stacked Headers

You can group multiple columns under a shared stacked header using the Display.GroupName property. Nested grouping is supported using the / separator to create hierarchical groups (e.g., "Order Details/Shipping").

C#

public class OrderInfo
{
    [Display(GroupName = "Order Details")]
    public int OrderID { get; set; }

    [Display(GroupName = "Order Details")]
    public string Customer { get; set; }

    [Display(GroupName = "Order Details")]
    public string City { get; set; }

    [Display(GroupName = "Order Details")]
    public string Country { get; set; }
}

[Display(GroupName = "Order Details")]
public double Qty
{
    get { return qty; }
    set { this.qty = value; }
}

Manually generate columns

The SfDataGrid allows to define the columns manually by adding the DataGridColumn objects to the SfDataGrid.Columns collection. If you want to show only the manually defined columns in the view, you can achieve that by setting the SfDataGrid.AutoGenerateColumnsMode property to None.

There are different types of columns available. Any column can be created based on the requirements from both XAML and code.

XAML

<syncfusion:SfDataGrid x:Name="dataGrid"
                       AutoGenerateColumnsMode="None"
                       ItemsSource="{Binding Orders}">
    <syncfusion:SfDataGrid.Columns>
        <syncfusion:DataGridNumericColumn HeaderText="Order ID"
                                          MappingName="OrderID"/>
        <syncfusion:DataGridTextColumn  HeaderText="Customer"
                                        MappingName="Customer"/>
        <syncfusion:DataGridTextColumn  HeaderText="Ship City"
                                        MappingName="City"/>
        <syncfusion:DataGridTextColumn  HeaderText="Ship Country"
                                        MappingName="Country"/>
        <syncfusion:DataGridTextColumn  HeaderText="Product"
                                        MappingName="Product"/>
    </syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>

C#

SfDataGrid dataGrid = new SfDataGrid();
OrderInfoViewModel orderInfoViewModel = new OrderInfoViewModel();
dataGrid.ItemsSource = orderInfoViewModel.Orders;
dataGrid.AutoGenerateColumnsMode = AutoGenerateColumnsMode.None;

DataGridNumericColumn orderIdColumn = new DataGridNumericColumn { HeaderText = "Order ID", MappingName = "OrderID" };
DataGridTextColumn customerColumn = new DataGridTextColumn { HeaderText = "Customer", MappingName = "Customer" };
DataGridTextColumn shipCityColumn = new DataGridTextColumn { HeaderText = "Ship City", MappingName = "City" };
DataGridTextColumn shipCountryColumn = new DataGridTextColumn { HeaderText = "Ship Country", MappingName = "Country" };
DataGridTextColumn productColumn = new DataGridTextColumn { HeaderText = "Product", MappingName = "Product" };

dataGrid.Columns.Add(orderIdColumn);
dataGrid.Columns.Add(customerColumn);
dataGrid.Columns.Add(shipCityColumn);
dataGrid.Columns.Add(shipCountryColumn);
dataGrid.Columns.Add(productColumn);

this.Content = dataGrid;

Column manipulation

You can get the columns from the SfDataGrid.Columns property.

Adding column to DataGrid

You can add a column to the DataGrid at runtime by adding an instance of a DataGridColumn to the SfDataGrid.Columns collection.

C#

this.dataGrid.Columns.Add(new DataGridTextColumn() { HeaderText = "Order ID", MappingName = "OrderID" });

Accessing a column

You can access a column through its column index or DataGridColumn.MappingName from the SfDataGrid.Columns collection.

C#

DataGridColumn column = this.dataGrid.Columns[1];
// OR
DataGridColumn column = this.dataGrid.Columns["OrderID"];

Clearing or removing a column

You can remove all the columns by clearing the SfDataGrid.Columns property.

C#

this.dataGrid.Columns.Clear();

You can remove a column using the Remove and RemoveAt methods.

C#

this.dataGrid.Columns.Remove(column);
// OR
this.dataGrid.Columns.RemoveAt(1);

Column Chooser

SfDataGrid allows you show or hide columns at runtime by selecting or deselecting them through the Column Chooser. You can enable this feature by setting the SfDataGrid.ShowColumnChooser property.

XAML

<syncfusion:SfDataGrid x:Name="dataGrid"
                       ItemsSource="{Binding Orders}"
                       ShowColumnChooser="True">
</syncfusion:SfDataGrid>

C#

SfDataGrid dataGrid = new SfDataGrid();
OrderInfoViewModel orderInfoViewModel = new OrderInfoViewModel();
dataGrid.ItemsSource = orderInfoViewModel.Orders;
dataGrid.ShowColumnChooser = true;
this.Content = dataGrid;

Column Chooser Header Text

You can also customize the header text of the Column Chooser using the SfDataGrid.ColumnChooserHeaderText property. By default, SfDataGrid.ColumnChooserHeaderText property is set to string.Empty, so the header is not displayed. If you assign any non-empty string, the header becomes visible.

XAML

<syncfusion:SfDataGrid x:Name="dataGrid"
                       ItemsSource="{Binding Orders}"
                       ColumnChooserHeaderText="Select Visible Columns"
                       ShowColumnChooser="True">
</syncfusion:SfDataGrid>

C#

SfDataGrid dataGrid = new SfDataGrid();
OrderInfoViewModel orderInfoViewModel = new OrderInfoViewModel();
dataGrid.ItemsSource = orderInfoViewModel.Orders;
dataGrid.ShowColumnChooser = true;
dataGrid.ColumnChooserHeaderText = "Select Visible Columns";
this.Content = dataGrid;

NOTE

Looking for the full .NET MAUI DataGrid component overview, features, pricing, and documentation? Visit the .NET MAUI DataGrid page.