Looking for suggestions about variable column widths

[Daniel Travison]

I've just started working with SfDataGrid and I'm trying to figure out how I can configure column widths but can't seem to get my desired result.

I'm trying to accomplish the following:

1: Trying to have column widths similar to what I could do with Maui Grid column definitions. All columns but one are auto sized and resizable and the second column should fill the available space.

Auto | * | Auto | Auto | Auto

2: Disable word wrap for all columns. When I allow resizing, columns start to wrap and the row height is not adjusted to the height of the wrapped content.

3: Do not exceed the width of the containing ContentView. 

4: Display tooltips for cells to address the case where the cell is clipped due to sizing.

I'm setting the following properties in the SfDataGrid element

• AutoGenerateColumnsMode="None"
  
• ColumnWidthMode="FitByCell"
• AllowResizingColumns="True"

I'm setting ColumnWidthMode.Fill when I create the column for the second column.

I'm setting MinimumColumnWidth = 40 for every column I create.

When the grid is first displayed, the second column is always quite a bit wider than any of its content and the grid is wider than the available width.  While I could use a scrollview here, but the large column width means scrolling would always be required.

I suspect I can accomplish most of this with templates but hope to avoid that unless absolutely necessary. 

Thanks,

Dan.

[Sethupathy Devarajan]

Hi Daniel,

Thanks for contacting us,

Query	Response
Trying to have column widths similar to what I could do with Maui Grid column definitions. All columns but one are auto sized and resizable and the second column should fill the available space. Auto | * | Auto | Auto | Auto	You can achieve this with applying column width for particular column. We had shared the UG link for your reference.   UG link : Apply Column Width Mode for Particular column.
Disable word wrap for all columns. When I allow resizing, columns start to wrap and the row height is not adjusted to the height of the wrapped content.	You can achieve this by setting the LineBreakMode to NoWrap for the columns. We have shared a simple sample for your reference.
Do not exceed the width of the containing ContentView.	We are unable to reproduce the issue you described. We are unsure about the width you are setting for the DataGrid and its parent. Kindly modify the attached sample to reproduce the issue so that we can provide a suitable solution.
Display tooltips for cells to address the case where the cell is clipped due to sizing.	We have already published a comprehensive Knowledge Base (KB) document outlining step-by-step instructions on how to display a tooltip in the MAUI DataGrid column.   KB link : How can we showcase tooltip for the dataRow in DataGrid. You can achieve tool tip with the provided Kb article.
the second column is always quite a bit wider than any of its content	As you mentioned, for the second column, you have defined the column width mode as Fill. The Fill width mode works by using the remaining space not occupied by the other columns. Hence, the column appears wider than its content.

Regards,

Sethupathy D.

Attachment: SfDataGridSample_22bfeaeb.zip

[Daniel Travison]

Thank you for the detailed explanation.

The SfGridView width and second column issue 'appears' to be an interaction issue in Maui. My original hierarchy  had the following:

SplitView(custom) -> ContentView -> Grid -> SfGridView.

I initially found that I had to set ContentView.WidthRequest in SplitView's Arrange method to get the SfGridView to fit the view.   When I refactored the UI design to eliminate the Grid, the explicit WidthRequest was no longer needed.

LineBreakModel works as expected for the data row cells but does not appear to apply to the header row cells. Is this a different setting?

The tooltip suggestion looks like a reasonable solution; I will drill into this more.

Lastly, I have a suggestion for the ColumnSizer property.  While it works for the 'hard-coded' case, it might be more useful the property itself was defined as a BindableProperty. For my use case, I need additional context to calculate the width, such as the FontFamily and FontSize; something that is not available at static compilation time.

THa

[Sethupathy Devarajan]

Hi Daniel,

Query	Response
The SfGridView width and second column issue 'appears' to be an interaction issue in Maui. When I refactored the UI design to eliminate the Grid, the explicit WidthRequest was no longer needed.	Thank you for the update. It’s good to know that refactoring the UI design resolved the issue with the SfGridView width and the second column.
LineBreakModel works as expected for the data row cells but does not appear to apply to the header row cells. Is this a different setting?	Defining lineBreakMode in the DataGridColumn does not apply the line break mode to the header cells. You can achieve line break mode for the header with a custom renderer. We have shared the code snippet for your reference. code snippet:   public MainPage() {     InitializeComponent();     dataGrid.CellRenderers.Remove("ColumnHeader");       dataGrid.CellRenderers.Add("ColumnHeader", new DataGridHeaderCellRendererExt()); }   public class DataGridHeaderCellRendererExt : DataGridHeaderCellRenderer {     protected override void OnInitializeDisplayView(DataColumnBase dataColumn, SfDataGridContentView? view)     {           base.OnInitializeDisplayView(dataColumn, view);           if (view!.Content is Grid headerView)         {               var label = headerView.Children.FirstOrDefault(child => child is SfDataGridHeaderLabel);               if (label != null && label is SfDataGridHeaderLabel newLabel)             {                 newLabel.LineBreakMode = LineBreakMode.NoWrap;             }           }       }   }
The tooltip suggestion looks like a reasonable solution; I will drill into this more.	We’re glad to hear that the tooltip suggestion seems like a good solution. If you need any additional help or have questions as you explore it further, please don’t hesitate to reach out.
Lastly, I have a suggestion for the ColumnSizer property.  While it works for the 'hard-coded' case, it might be more useful the property itself was defined as a BindableProperty.	Thank you for your suggestion regarding the ColumnSizer property. We appreciate your feedback. We understand how having it defined as a BindableProperty could provide greater flexibility, especially in dynamic scenarios. We'll certainly consider this enhancement in future updates to improve the user experience. Your input is valuable to us, and we'll review this with the development team.
For my use case, I need additional context to calculate the width, such as the FontFamily and FontSize; something that is not available at static compilation time.	Please note that the ColumnWidthMode calculates the width along with the FontFamily and FontSize, if defined in the default styling.   In your case, it seems that you need to determine the width of a text element based on its font properties, which aren't known until runtime. To handle this, you'll need to call ResetAutoWidth() and refresh the ColumnSizer after setting the FontFamily and FontSize.   Code Snippet:  private void Button_Clicked(object sender, EventArgs e)  {      this.dataGrid.DefaultStyle = new DataGridStyle      {          RowFontFamily = "Bold",          RowFontSize = 30.0      };      foreach (var item in dataGrid.Columns)      {          dataGrid.ColumnSizer.ResetAutoWidth(item);      }      dataGrid.ColumnSizer.Refresh();  }

Regards,

Sethupathy D.

Attachment: SfDataGridSample_54cbc9f8.zip