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.
Unfortunately, activation email could not send to your email. Please try again.

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.

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.

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

E:\KB\Colum Sizer\After1.png

Figure 2: Star Colum Sizing

 

Sample Links:

WPF

WinRT

Silverlight

UWP

Article ID: Published Date: Last Revised Date: Platform: Control:
3081 01/02/2015 01/22/2016 WinRT SfDataGrid
Did you find this information helpful?
Add Comment
You must log in to leave a comment

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.