|
1 | | -# How-to-delete-selected-rows-using-delete-button-in-Flutter-DataTable |
2 | | -This demo shows how to delete selected rows using delete button in Flutter DataTable. |
| 1 | +# How to delete selected rows using delete button in Flutter DataTable (SfDataGrid)?. |
| 2 | + |
| 3 | +In this article, we will show you how to delete selected rows using delete button in [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. In the [buildRow](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/buildRow.html) method, display the `Details` and `Delete` buttons based on row selection using the selectedRows list from the [DataGridController](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridController-class.html). When a row is selected, the delete button will appear in the last column. Tapping the delete button removes the corresponding row from [DataGridSource.rows](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/rows.html), and calling [notifyListeners()](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSourceChangeNotifier/notifyListeners.html) refreshes the SfDataGrid to reflect the changes. |
| 6 | + |
| 7 | +```dart |
| 8 | +@override |
| 9 | + DataGridRowAdapter? buildRow(DataGridRow row) { |
| 10 | + bool isSelected = controller.selectedRows.contains(row); |
| 11 | +
|
| 12 | + return DataGridRowAdapter( |
| 13 | + cells: |
| 14 | + row.getCells().map<Widget>((dataGridCell) { |
| 15 | + if (dataGridCell.columnName == 'button') { |
| 16 | + return Padding( |
| 17 | + padding: const EdgeInsets.all(3.0), |
| 18 | + child: ElevatedButton( |
| 19 | + onPressed: () { |
| 20 | + if (isSelected) { |
| 21 | + dataGridRow.remove(row); |
| 22 | + notifyListeners(); |
| 23 | + } else { |
| 24 | + showDialog( |
| 25 | + context: context, |
| 26 | + builder: |
| 27 | + (context) => AlertDialog( |
| 28 | + title: Text('Employee Details'), |
| 29 | + content: Column( |
| 30 | + mainAxisSize: MainAxisSize.min, |
| 31 | + children: [ |
| 32 | + Text( |
| 33 | + 'ID: ${row.getCells()[0].value.toString()}', |
| 34 | + ), |
| 35 | + Text( |
| 36 | + 'Name: ${row.getCells()[1].value.toString()}', |
| 37 | + ), |
| 38 | + Text( |
| 39 | + 'Designation: ${row.getCells()[2].value.toString()}', |
| 40 | + ), |
| 41 | + ], |
| 42 | + ), |
| 43 | + actions: [ |
| 44 | + TextButton( |
| 45 | + onPressed: () => Navigator.pop(context), |
| 46 | + child: const Text('Close'), |
| 47 | + ), |
| 48 | + ], |
| 49 | + ), |
| 50 | + ); |
| 51 | + } |
| 52 | + }, |
| 53 | + style: ElevatedButton.styleFrom( |
| 54 | + backgroundColor: isSelected ? Colors.red : Colors.blue, |
| 55 | + ), |
| 56 | + child: |
| 57 | + isSelected |
| 58 | + ? const Icon(Icons.delete, color: Colors.white) |
| 59 | + : const Text('Details'), |
| 60 | + ), |
| 61 | + ); |
| 62 | + } |
| 63 | + return Container( |
| 64 | + alignment: Alignment.center, |
| 65 | + padding: const EdgeInsets.all(8.0), |
| 66 | + child: Text(dataGridCell.value.toString()), |
| 67 | + ); |
| 68 | + }).toList(), |
| 69 | + ); |
| 70 | +} |
| 71 | +``` |
| 72 | + |
| 73 | +You can download this example on [GitHub](https://github.com/SyncfusionExamples/How-to-delete-selected-rows-using-delete-button-in-Flutter-DataTable). |
0 commit comments