|
1 | | -# How-to-retrieve-additional-row-details-by-expanding-a-cell-in-Flutter-DataTable |
2 | | -How to retrieve additional row details by expanding a cell in Flutter DataTable |
| 1 | +# How to retrieve additional row details by expanding a cell in Flutter DataGrid. |
| 2 | + |
| 3 | +In this article, we will show you how to retrieve additional row details by expanding a cell in [Flutter DataGrid](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. In the [buildRow](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/buildRow.html) method, load the cell value along with the icon button, and call [showDialog](https://api.flutter.dev/flutter/material/showDialog.html). The [onPressed](https://api.flutter.dev/flutter/material/IconButton/onPressed.html) event of the IconButton in the buildRow method is where the dialog is triggered. This dialog displays the expanded details. |
| 6 | + |
| 7 | +```dart |
| 8 | +class EmployeeDataSource extends DataGridSource { |
| 9 | +
|
| 10 | +….. |
| 11 | +
|
| 12 | +@override |
| 13 | + DataGridRowAdapter buildRow(DataGridRow row) { |
| 14 | + return DataGridRowAdapter( |
| 15 | + cells: row.getCells().map<Widget>((DataGridCell cell) { |
| 16 | + return Container( |
| 17 | + alignment: Alignment.center, |
| 18 | + child: cell.columnName == 'Name' |
| 19 | + ? Row( |
| 20 | + children: [ |
| 21 | + Expanded( |
| 22 | + child: Container( |
| 23 | + alignment: Alignment.centerLeft, |
| 24 | + child: Text( |
| 25 | + cell.value.toString(), |
| 26 | + ), |
| 27 | + ), |
| 28 | + ), |
| 29 | + SizedBox( |
| 30 | + width: 40, |
| 31 | + child: Builder(builder: (context) { |
| 32 | + int rowIndex = datagridRows.indexOf(row); |
| 33 | + return IconButton( |
| 34 | + hoverColor: Colors.transparent, |
| 35 | + color: Colors.blue, |
| 36 | + icon: const Icon(Icons.expand_more), |
| 37 | + onPressed: (() { |
| 38 | + showDialog<String>( |
| 39 | + context: context, |
| 40 | + builder: (BuildContext context) => AlertDialog( |
| 41 | + scrollable: true, |
| 42 | + titleTextStyle: const TextStyle( |
| 43 | + color: Colors.black, |
| 44 | + fontWeight: FontWeight.bold, |
| 45 | + fontSize: 16), |
| 46 | + title: const Text('Personal Details'), |
| 47 | + actions: [ |
| 48 | + TextButton( |
| 49 | + onPressed: (() { |
| 50 | + Navigator.pop(context); |
| 51 | + }), |
| 52 | + child: const Text('Close')) |
| 53 | + ], |
| 54 | + content: Container( |
| 55 | + margin: const EdgeInsets.all(20), |
| 56 | + child: Row( |
| 57 | + children: [ |
| 58 | + const SizedBox(width: 20), |
| 59 | + Text( |
| 60 | + 'Employee address \n \n${employees[rowIndex].address}'), |
| 61 | + const SizedBox(width: 20), |
| 62 | + Text( |
| 63 | + 'City \n \n${employees[rowIndex].city}'), |
| 64 | + const SizedBox(width: 20), |
| 65 | + Text( |
| 66 | + 'Country \n \n${employees[rowIndex].country}'), |
| 67 | + const SizedBox(width: 20), |
| 68 | + ], |
| 69 | + ), |
| 70 | + ))); |
| 71 | + }), |
| 72 | + ); |
| 73 | + }), |
| 74 | + ) |
| 75 | + ], |
| 76 | + ) |
| 77 | + : Container( |
| 78 | + padding: const EdgeInsets.symmetric(horizontal: 8.0), |
| 79 | + alignment: |
| 80 | + cell.columnName == 'ID' || cell.columnName == 'Salary' |
| 81 | + ? Alignment.centerRight |
| 82 | + : Alignment.centerLeft, |
| 83 | + child: Text( |
| 84 | + cell.value.toString(), |
| 85 | + ), |
| 86 | + ), |
| 87 | + ); |
| 88 | + }).toList()); |
| 89 | + } |
| 90 | +} |
| 91 | +``` |
| 92 | + |
| 93 | +You can download this example on [GitHub](https://github.com/SyncfusionExamples/How-to-retrieve-additional-row-details-by-expanding-a-cell-in-Flutter-DataTable). |
0 commit comments