How to customize the width of the GridComboboxColumn based on its HeaderText and Items in UWP ?
SfDataGrid supports ColumnSizing feature that allows you to adjust the column width based on its HeaderText or data present in the cell depending upon the type of ColumnSizer that you have defined either at the SfDataGrid or column level. You cannot adjust the width of the GridComboBoxColumn based on the Items loaded from an ItemsSource of that column by using the ColumnSizer directly.
The following screenshot displays the behavior of the Auto ColumnSizer, as width of the column is calculated based on the HeaderText and cell content of the GridComboBoxColumn.
Figure 1: Column width set based on Auto ColumnSizer
In the SfDataGrid, you can adjust the width of GridComboBoxColumn based on the items loaded from an ItemsSource of that column. To achieve this, customize the column width based on the loaded items in GridComboBoxColumn by deriving a new class from the GridColumnSizer class and overriding its CalculateCellWidth () virtual method. The following code example illustrates how to derive a new class from GridColumnSizer and override its CalculateCellWidth () virtual method.
C#
public class CustomColumnSizer:GridColumnSizer { public CustomColumnSizer(SfDataGrid grid) : base(grid) { } protected override double CalculateCellWidth(GridColumn column, bool setWidth = true) { } }
The above CalculateCellWidth () method is invoked to calculate the width of each column in the SfDataGrid. You can customize the column width based on the items in GridComboBoxColumn as follows.
C#
protected override double CalculateCellWidth(GridColumn column, bool setWidth = true) { //Customizing width calculation for GridComboBoxColumn if (column is GridComboBoxColumn) { //Get the width of the corresponding Column double colWidth = double.MaxValue; //Get the Source collection from the corresponding GridComboBoxColumn from ItemsSource property var source = (column as GridComboBoxColumn).ItemsSource; //Initialize the below field for storing length string maximumComboItemsText = string.Empty; //Get the column width and row height var clientSize = new Size(colWidth, DataGrid.RowHeight); //Calculate the maximum length for each ComboBox items and store maximum length foreach (var comboItems in source) { string comboItemText = (string)comboItems; if (maximumComboItemsText.Length < comboItemText.Length) maximumComboItemsText = comboItemText; } //Get the width for maximum ComboBoxItems's text and returned as a column width of that column var measureSize= MeasureText(clientSize,maximumComboItemsText,column,null,GridQueryBounds.Width); return measureSize.Width + SystemParameters.ScrollWidth; } //Default column width calculation performed other than GridComboBoxColumn return base.CalculateCellWidth(column, setWidth); }
You can get each item of GridComboBoxColumn by accessing an ItemsSource of the corresponding column and comparing the length of each item to the others in the collection and storing the item having the maximum length. By using the MeasureText () method, you can get the corresponding Height and Width of the maximum combo item text.
Assign the instance of the above CustomColumnSizer class to SfDataGrid’s GridColumnSizer property as illustrated in the following code example.
C#
public MainWindow() { InitializeComponent(); // Assign custom GridColumnSizer to datagrid GridColumnSizer this.grid.GridColumnSizer= new CustomColumnSizer(grid); }
The above customized width is applied to GridComboBoxColumn as displayed in the following screenshot.
Figure 2: Customized column width applied to Country column based on its loaded items
Sample Links