How to customize Star ColumnSizer to calculate width with different ratios in SfDataGrid?

In SfDataGrid, the ColumnSizer property allows you to specify the column width, based on the data present in the cell and the available width. You can define the ColumnSizer property either in the Grid or Column level. In GridColumnSizer.Star type, the available grid width is divided into equal sized regions and the divided width is set for each column. When you have three columns in the grid, the total space is divided by three and that value is allocated to the width of the column.

The following code demonstrates ColumnSizer in XAML.

XAML

The following screenshot displays the ColumnSizer.Star type.

Figure 1: ColumnSizer.Star

Column widths are processed in GridColumnSizer class. You can override this class and customize the width calculation by setting the SfDataGrid.Columnsizer property. When you want to divide the columns width in different ratios using Star ColumnSizer, you need to override the SetStarWidth method in ColumnSizer class in SfDataGrid.

ColumnSizerExt.ColumnRatio attached property is used to denote the ratio of width that needs to be assigned to the column.

Using the attached property, the ratio for ProductName column is set to 2, SalesID column is set to 3 and the remaining ProductId and CustomerName columns are set to the default value of 1. In grid, when all the columns need ColumnSizer, you can set the ColumnSizer as Star for the grid in XAML.

The following code example demonstrates how to assign the Star ColumnRatio for each column in SfDataGrid by using ColumnSizerExt.ColumnRatio attached property.

XAML

The following code example demonstrates how the width is calculated for column, based on the ColumnSizerExt.ColumnRatio property in SetStarWidth method.

C#

The following code example demonstrates the ColumnRatio attached property.

C#

The following screenshot displays the Star Colum Sizing after overriding the SetStarWidth. In this image, the column width is set based on 1*, 2*, 3* and 1*.

Figure 2: Star Colum Sizing

Sample Links:

WPF

WinRT

Silverlight

UWP