Row height calculation does not consider custom font/size.
Hi,
Looks like at all the places while calculating the row height or column width only a default font (and font size) is considered. We have a custom font and font size more than the one considered as default by the library. This is causing the cell value being clipped and scrollbar is being shown within the cell. Is there any way syncfusion consider the font set in the theme rather than the hard coded one?
We have added onQueryRowHeight handler like below
Here is the observed behaviour.
Thanks,
Prasad
Hi Prasad,
To calculate the cell height based on a different TextStyle, you can override the ColumnSizer.computeHeaderCellWidth method for the header and ColumnSizer.computeCellHeight method for row cells. Inside these methods, you can return the super method with the required TextStyle to achieve the desired cell height calculation. To implement this, create an instance of the CustomColumnSizer class and assign it to the SfDataGrid.columnSizer property. This will ensure that the custom cell height calculation is applied to the DataGrid. Please check the following code snippet.
|
final TextStyle _rowCellTextStyle = const TextStyle(fontFamily: ' SF_Regular, fontSize: 18); late final CustomColumnSizer _customColumnSizer;
@override void initState() { super.initState(); _employees = getEmployeeData(); _employeeDataSource = EmployeeDataSource(employees: _employees, rowCellTextStyle: _rowCellTextStyle); _customColumnSizer = CustomColumnSizer(rowCellTextStyle: _rowCellTextStyle); }
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Flutter SfDataGrid'), ), body: SfDataGrid( source: _employeeDataSource, columnSizer: _customColumnSizer, onQueryRowHeight: (details) { return details.getIntrinsicRowHeight(details.rowIndex); }, columns: getColumns), ); }
In CustomColumnSizer class: CustomColumnSizer({required this.rowCellTextStyle}); TextStyle rowCellTextStyle; @override double computeCellHeight(GridColumn column, DataGridRow row, Object? cellValue, TextStyle textStyle) { return super.computeCellHeight(column, row, cellValue, rowCellTextStyle); } } |
For your convenience, we have prepared a simple sample that demonstrates this approach. Please refer to the attached sample for more information.
In addition, we have already provided detailed information on how to calculate the row cell height based on different text styles in the documentation. To gain further insights, kindly review the provided document.
UG Document: https://help.syncfusion.com/flutter/datagrid/columns-sizing#autofit-calculation-based-on-different-textstyle
Regards,
Tamilarasan
Attachment: sample_2737a529.zip
