|
1 | | -# How-to-show-radio-button-and-select-a-row-through-it-in-Flutter-DataGrid |
2 | | -How to show radio button and select a row through it in Flutter DataGrid |
| 1 | +# How to show radio buttons and enable single selection of a row using them in Flutter DataGrid (SfDataGrid)? |
| 2 | + |
| 3 | +In this article, you can learn how to show radio buttons and enable single selection of a row using them in [Flutter DataGrid](https://www.syncfusion.com/flutter-widgets/flutter-datagrid). |
| 4 | + |
| 5 | +## STEP 1: |
| 6 | +Initialize the [SfDataGrid](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid-class.html) widget with all the required properties. To utilize the DataGridController, you need to assign it to the [SfDataGrid.controller](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/controller.html) property. |
| 7 | + |
| 8 | +```dart |
| 9 | +class MyHomePageState extends State<MyHomePage> { |
| 10 | + |
| 11 | + DataGridController dataGridController = DataGridController(); |
| 12 | + |
| 13 | +… |
| 14 | + |
| 15 | + @override |
| 16 | + Widget build(BuildContext context) { |
| 17 | + return Scaffold( |
| 18 | + appBar: AppBar(title: const Text('Syncfusion DataGrid Demo')), |
| 19 | + body: SfDataGrid( |
| 20 | + source: _employeeDataSource, |
| 21 | + selectionMode: SelectionMode.single, |
| 22 | + columns: getColumns, |
| 23 | + controller: dataGridController, |
| 24 | + columnWidthMode: ColumnWidthMode.fill, |
| 25 | + ), |
| 26 | + ); |
| 27 | + } |
| 28 | +} |
| 29 | +``` |
| 30 | +## STEP 2: |
| 31 | +To achieve this, you can add a new column and DataGridCell specifically for the radio buttons. Within the [DataGridSource.buildRow](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/buildRow.html) method, you can return the [Radio](https://api.flutter.dev/flutter/material/Radio-class.html) widget for the corresponding column. Additionally, you can implement row selection when tapping on the radio button by utilizing programmatic selection. |
| 32 | + |
| 33 | +```dart |
| 34 | +class EmployeeDataSource extends DataGridSource { |
| 35 | + |
| 36 | + DataGridController dataGridController; |
| 37 | + |
| 38 | + bool _selectedValue = true; |
| 39 | + |
| 40 | +… |
| 41 | + |
| 42 | + @override |
| 43 | + DataGridRowAdapter buildRow(DataGridRow row) { |
| 44 | + return DataGridRowAdapter( |
| 45 | + cells: row.getCells().map<Widget>((dataGridCell) { |
| 46 | + return dataGridCell.columnName == 'SelectionWidget' |
| 47 | + ? Container( |
| 48 | + alignment: Alignment.center, |
| 49 | + child: Radio<bool>( |
| 50 | + value: getValue(row), |
| 51 | + groupValue: _selectedValue, |
| 52 | + onChanged: (bool? value) { |
| 53 | + _selectedValue = !value!; |
| 54 | + dataGridController.selectedRow = row; |
| 55 | + }, |
| 56 | + ), |
| 57 | + ) |
| 58 | + : Container( |
| 59 | + alignment: Alignment.center, |
| 60 | + padding: const EdgeInsets.symmetric(horizontal: 8.0), |
| 61 | + child: Text(dataGridCell.value.toString()), |
| 62 | + ); |
| 63 | + }).toList()); |
| 64 | + } |
| 65 | + |
| 66 | + getValue(DataGridRow row) { |
| 67 | + bool isSelected = dataGridController.selectedRow == row; |
| 68 | + return isSelected; |
| 69 | + } |
| 70 | +} |
| 71 | +``` |
| 72 | +Download the example from [GitHub](https://github.com/SyncfusionExamples/How-to-show-radio-button-and-select-a-row-through-it-in-Flutter-DataGrid) |
0 commit comments