Syncfusion AI Assistant

How can I help you?

Column Sizing in .NET MAUI DataGrid (SfDataGrid)

15 Apr 202612 minutes to read

The .NET MAUI DataGrid allows you to set the column widths based on certain logics using the SfDataGrid.ColumnWidthMode or DataGridColumn.ColumnWidthMode property.

To get start quickly with column sizing in .NET MAUI DataGrid, you can check on this video:

Below is the list of predefined column sizing options available:

Type Column width
Fill Divides the total width equally for columns.
Auto Calculates the width of columns based on header and cell contents so that header and cell contents are not truncated.
LastColumnFill The column width of the DataGridColumns is adjusted with respect to the SfDataGrid.DefaultColumnWidth property. If the columns do not fill the entire view space, the width of the last column fills the unoccupied space in the view.
FitByCell Calculates the width of columns based on cell contents so that cell contents are not truncated.
FitByHeader Calculates the width of columns based on header content so that header content is not truncated.
None Default column width or defined width set to a column.

NOTE

ColumnWidthMode will not work when the column width is defined explicitly. The ColumnWidthMode calculates the column width based on MinimumWidth and MaximumWidth properties.

The code below applies the ColumnWidthMode.Fill to equally set the width for SfDataGrid.Columns.

<ContentPage.BindingContext>
    <local:OrderInfoViewModel />
</ContentPage.BindingContext>

<syncfusion:SfDataGrid  x:Name = "dataGrid"
                        ColumnWidthMode = "Fill"
                        ItemsSource = "{Binding Orders}" />
SfDataGrid dataGrid = new SfDataGrid();
OrderInfoViewModel viewModel = new OrderInfoViewModel();
dataGrid.ItemsSource = viewModel.Orders;
dataGrid.ColumnWidthMode = ColumnWidthMode.Fill;
this.Content = dataGrid;

maui-datagrid-fill-column-width-mode

Change the default column width for columns

If you want to set the common width for all the columns, you can use the DefaultColumnWidth property.

<ContentPage.BindingContext>
    <local:OrderInfoViewModel />
</ContentPage.BindingContext>

<syncfusion:SfDataGrid  x:Name = "dataGrid"
                        DefaultColumnWidth = "120"
                        ItemsSource = "{Binding Orders}" />
SfDataGrid dataGrid = new SfDataGrid();
OrderInfoViewModel viewModel = new OrderInfoViewModel();
dataGrid.ItemsSource = viewModel.Orders;
dataGrid.DefaultColumnWidth = 120;
this.Content = dataGrid;

Retrieve the auto-calculated width of columns

You can retrieve the width of the columns when it is auto-calculated based on the ColumnWidthMode property using the ActualWidth property .

<ContentPage.BindingContext>
    <local:OrderInfoViewModel />
</ContentPage.BindingContext>

<Grid RowDefinitions="*,50">
        <syncfusion:SfDataGrid x:Name = "dataGrid"
                               Grid.Row = "0"
                               ItemsSource = "{Binding Orders}"
                               ColumnWidthMode = "Auto" />
        <Button Text = "Get Column Width"
                Grid.Row = "1"
                WidthRequest = "300"
                HorizontalOptions = "Center"
                Clicked = "Button_Clicked">
        </Button>
</Grid>
SfDataGrid dataGrid = new SfDataGrid();
OrderInfoViewModel viewModel = new OrderInfoViewModel();
dataGrid.ItemsSource = viewModel.Orders;
dataGrid.ColumnWidthMode = ColumnWidthMode.Auto;

Button button = new Button();
button.Text = "Get Column Width";
button.WidthRequest = 300;
button.HorzontalOption = LayoutOptions.Center;
button.Clicked += Button_Clicked;

Grid grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Star });
grid.RowDefinitions.Add(new RowDefinition() { Height = 50 });
grid.Children.Add(dataGrid);
grid.Children.Add(button);
grid.SetRow(dataGrid, 0);
grid.SetRow(button, 1);
this.Content = grid;
private void Button_Clicked(object sender, EventArgs e)
{
    double width = dataGrid.Columns["OrderID"].ActualWidth;
}

Apply ColumnWidthMode for a particular column

To apply column sizing to an individual column, use the DataGridColumn.ColumnWidthMode property. The DataGridColumn.ColumnWidthMode property is also a type of the ColumnWidthMode. If the DataGridColumn.ColumnWidthMode is not explicitly set to a value, then it takes the value of the SfDataGrid.ColumnWidthMode and applies the width to the columns accordingly.

To apply ColumnWidthMode for a particular column, follow the code example:

<ContentPage.BindingContext>
    <local:OrderInfoViewModel />
</ContentPage.BindingContext>

<syncfusion:SfDataGrid x:Name = "dataGrid"
                       ItemsSource = "{Binding Orders}"
                       ColumnWidthMode = "None">
    <syncfusion:SfDataGrid.Columns>
        <syncfusion:DataGridTextColumn MappingName = "Customer"
                                       ColumnWidthMode = "Auto"
                                       HeaderText = "Customer">
        </syncfusion:DataGridTextColumn>
    </syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>
SfDataGrid dataGrid = new SfDataGrid();
OrderInfoViewModel viewModel = new OrderInfoViewModel();
dataGrid.ItemsSource = viewModel.Orders;
dataGrid.ColumnWidthMode = ColumnWidthMode.None;

DataGridTextColumn textColumn = new DataGridTextColumn();
textColumn.MappingName = "Customer";
textColumn.HeaderText = "Customer";
textColumn.ColumnWidthMode = ColumnWidthMode.Auto;

dataGrid.Columns.Add(textColumn);

this.Content = dataGrid;

maui-datagrid-individual-column-width-mode

Refreshing ColumnSizer at runtime

To refresh the column sizing for SfDataGrid.Columns at runtime, use the SfDataGrid.ColumnSizer.Refresh method.

Consider that ColumnWidthMode.Auto is applied to the SfDataGrid. If the underlying values are changed at run time, refresh the column sizer as follows:

<ContentPage.BindingContext>
    <local:OrderInfoViewModel />
</ContentPage.BindingContext>    
<Grid RowDefinitions = "*,50">
    <syncfusion:SfDataGrid x:Name = "dataGrid"
                           Grid.Row = "0"
                           ColumnWidthMode = "Auto"
                           ItemsSource = "{Binding Orders}">
    </syncfusion:SfDataGrid>
    <Button x:Name = "button"
            Grid.Row = "1"
            Text = "Refresh ColumnSizer"
            WidthRequest = "200"
            HorizontalOptions = "Center"
            Clicked = "ColumnSizerChanged">
    </Button>
</Grid>
SfDataGrid dataGrid = new SfDataGrid();
OrderInfoViewModel viewModel = new OrderInfoViewModel();
dataGrid.ItemsSource = viewModel.Orders;
dataGrid.ColumnWidthMode = ColumnWidthMode.Auto;

Button button = new Button();
button.Text = "Refresh ColumnSizer";
button.WidthRequest = 200;
button.HorzontalOption = LayoutOptions.Center;
button.Clicked += ColumnSizerChanged;

Grid grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Star });
grid.RowDefinitions.Add(new RowDefinition() { Height = 50 });
grid.Children.Add(dataGrid);
grid.Children.Add(button);
grid.SetRow(dataGrid, 0);
grid.SetRow(button, 1);
this.Content = grid;
private void ColumnSizerChanged(object sender, EventArgs e)
{
    //Refreshes the column sizer of the SfDataGrid
    dataGrid.ColumnSizer.Refresh(true);
}

Customize auto width calculation for a column

For cases where a column might require more width than the applied auto width or if you want to use your custom logic to calculate the auto width of a column, return a desired width in the OnComputeCellWidth() override of the custom-written column-sizer class derived from DataGridColumnSizer and assign it to the SfDataGrid.ColumnSizer property.
In case you want to modify the auto calculations of a column’s header cell alone, return the desired width in the OnComputeHeaderCellWidth() override of your custom column-sizer class.

public class CustomColumnSizer : DataGridColumnSizer
{
	protected override double OnComputeHeaderCellWidth(string cellValue, DataGridColumn column = null)
	{
		if (column.MappingName == "Customer")
		{
            // return width based on your logic
            return 150;	
		}
		else
		{
			return base.OnComputeHeaderCellWidth(cellValue, column);
		}
	}
}
<ContentPage.Resources>
    <local:CustomColumnSizer x:Key = "CustomColumnSizer"/>
</ContentPage.Resources>

<ContentPage.BindingContext>
    <local:OrderInfoViewModel />
</ContentPage.BindingContext>

<syncfusion:SfDataGrid x:Name = "dataGrid"
                        ItemsSource = "{Binding Orders}"
                        ColumnWidthMode = "Auto"
                        ColumnSizer = "{x:StaticResource CustomColumnSizer}">
</syncfusion:SfDataGrid>
SfDataGrid dataGrid = new SfDataGrid();
OrderInfoViewModel viewModel = new OrderInfoViewModel();
dataGrid.ItemsSource = viewModel.Orders;
dataGrid.ColumnWidthMode = ColumnWidthMode.Auto;
dataGrid.ColumnSizer = new CustomColumnSizer();
this.Content = dataGrid;

maui-datagrid-customize-auto-width-calculation