We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: WinRT |
Control: 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.


The following screenshot displays the ColumnSizer.Star type.

E:\KB\Colum Sizer\before.PNG

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.


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


The following code example demonstrates the ColumnRatio attached property.


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

E:\KB\Colum Sizer\After1.png

Figure 2: Star Colum Sizing


Sample Links:





You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile