Articles in this section
Category / Section

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

3 mins read

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.


<grid:SfDataGrid x:Name="sfdatagrid"
                        ItemsSource="{Binding Path=Products}">

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.


    <syncfusion:GridTextColumn HeaderText="ProductId" MappingName="ProductId" />
    <syncfusion:GridTextColumn HeaderText="ProductName" MappingName="ProductName" local:ColumnSizerExt.ColumnRatio ="2"/>
    <syncfusion:GridTextColumn HeaderText="SalesID" MappingName="SalesID" local:ColumnSizerExt.ColumnRatio ="3" />
    <syncfusion:GridTextColumn HeaderText="CustomerName" MappingName="CustomerName" />

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


// Assign custom GridColumnSizer to datagrid GridColumnSizer
this.sfdatagrid.GridColumnSizer = new ColumnSizerExt(sfdatagrid);
public class ColumnSizerExt : GridColumnSizer
    public ColumnSizerExt(SfDataGrid grid)
        : base(grid)
    //Overriding SetStarWidth method
    protected override void SetStarWidth(double remainingColumnWidth, IEnumerable<GridColumn> remainingColumns)
        var removedColumn = new List<GridColumn>();
        var columns = remainingColumns.ToList();
        var totalRemainingStarValue = remainingColumnWidth;
        double removedWidth = 0;
        bool isremoved;
        while (columns.Count > 0)
            isremoved = false;
            removedWidth = 0;
            var columnsCount = 0;
            foreach (var data in columns)
                columnsCount += ColumnSizerExt.GetColumnRatio(col);
            double starWidth = Math.Floor((totalRemainingStarValue / columnsCount));
            var column = columns.First();
            starWidth *= ColumnSizerExt.GetColumnRatio(column);
            double computedWidth = SetColumnWidth(column, starWidth);
            if (starWidth != computedWidth && starWidth > 0)
                isremoved = true;
                foreach (var remColumn in removedColumn)
                    if (!columns.Contains(remColumn))
                        removedWidth += remColumn.ActualWidth;
                totalRemainingStarValue += removedWidth;
            totalRemainingStarValue = totalRemainingStarValue - computedWidth;
            if (!isremoved)
                if (!removedColumn.Contains(column))

The following code example demonstrates the ColumnRatio attached property.


public static int GetColumnRatio(DependencyObject obj)
    return (int)obj.GetValue(ColumnRatioProperty);
public static void SetColumnRatio(DependencyObject obj, int value)
    obj.SetValue(ColumnRatioProperty, value);
public static readonly DependencyProperty ColumnRatioProperty =
    DependencyProperty.RegisterAttached("ColumnRatio", typeof(int), typeof(ColumnSizerExt), new PropertyMetadata(1));

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:





Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied