How to customize Star ColumnSizer to calculate width with different ratios in WPF DataGrid?
In WPF DataGrid, 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
<grid:SfDataGrid x:Name="sfdatagrid"
AutoGenerateColumns="False"
ColumnSizer="Star"
AllowFiltering="True"
AllowEditing="True"
ItemsSource="{Binding Path=Products}">
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
<syncfusion:SfDataGrid.Columns> <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" /> </syncfusion:SfDataGrid.Columns>
The following code example demonstrates how the width is calculated for column, based on the ColumnSizerExt.ColumnRatio property in SetStarWidth method.
C#
// 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;
columns.Remove(column);
foreach (var remColumn in removedColumn)
{
if (!columns.Contains(remColumn))
{
removedWidth += remColumn.ActualWidth;
columns.Add(remColumn);
}
}
removedColumn.Clear();
totalRemainingStarValue += removedWidth;
}
totalRemainingStarValue = totalRemainingStarValue - computedWidth;
if (!isremoved)
{
columns.Remove(column);
if (!removedColumn.Contains(column))
removedColumn.Add(column);
}
}
}
}
The following code example demonstrates the ColumnRatio attached property.
C#
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*.
Figure 2: Star Colum Sizing
Sample Links:
Conclusion
I hope you enjoyed learning about how to customize Star ColumnSizer to calculate width with different ratios in DataGrid.
You can refer to our WPF DataGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF DataGrid exampleto understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
