|
1 | | -# How-to-automatically-resize-the-row-height-in-a-Flutter-DataGrid |
2 | | -How to automatically resize the row height in a Flutter DataGrid |
| 1 | +# How to automatically resize the row height after editing data in a Flutter DataTable. |
| 2 | + |
| 3 | +In this article, we will show you how to automatically resize the row height after editing data in a [Flutter DataTable](https://www.syncfusion.com/flutter-widgets/flutter-datagrid). |
| 4 | + |
| 5 | +Initialize the [SfDataGrid](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid-class.html) widget with all the required properties. You can achieve this by calling the [DataGridController.refreshRow](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridController/refreshRow.html) method with the corresponding row index and setting the `recalculateRowHeight` property to true within the [DataGridSource.onCellSubmit](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/onCellSubmit.html) method. |
| 6 | + |
| 7 | +```dart |
| 8 | + DataGridController dataGridController = DataGridController(); |
| 9 | + |
| 10 | + @override |
| 11 | + void initState() { |
| 12 | + super.initState(); |
| 13 | + _employees = getEmployeeData(); |
| 14 | + _employeeDataSource = EmployeeDataSource(_employees, dataGridController); |
| 15 | + } |
| 16 | + |
| 17 | + @override |
| 18 | + Widget build(BuildContext context) { |
| 19 | + return Scaffold( |
| 20 | + appBar: AppBar(title: const Text('Syncfusion Flutter DataGrid')), |
| 21 | + body: SfDataGrid( |
| 22 | + controller: dataGridController, |
| 23 | + source: _employeeDataSource, |
| 24 | + columns: getColumns, |
| 25 | + allowEditing: true, |
| 26 | + navigationMode: GridNavigationMode.cell, |
| 27 | + selectionMode: SelectionMode.single, |
| 28 | + onQueryRowHeight: (details) { |
| 29 | + return details.getIntrinsicRowHeight(details.rowIndex); |
| 30 | + }, |
| 31 | + ), |
| 32 | + ); |
| 33 | + } |
| 34 | + |
| 35 | +class EmployeeDataSource extends DataGridSource { |
| 36 | + EmployeeDataSource(this.employees, this.dataGridController) { |
| 37 | + dataGridRows = employees |
| 38 | + .map<DataGridRow>((dataGridRow) => dataGridRow.getDataGridRow()) |
| 39 | + .toList(); |
| 40 | + } |
| 41 | + |
| 42 | + DataGridController dataGridController; |
| 43 | +… |
| 44 | + |
| 45 | + @override |
| 46 | + void onCellSubmit(DataGridRow dataGridRow, RowColumnIndex rowColumnIndex, |
| 47 | + GridColumn column) { |
| 48 | +… |
| 49 | + |
| 50 | + dataGridController.refreshRow(rowColumnIndex.rowIndex, |
| 51 | + recalculateRowHeight: true); |
| 52 | + } |
| 53 | +} |
| 54 | +``` |
| 55 | + |
| 56 | +You can download this example on [GitHub](https://github.com/SyncfusionExamples/How-to-automatically-resize-the-row-height-in-a-Flutter-DataGrid). |
0 commit comments