Delete row by clicking the delete icon

[WONG PEI SAN A20EC0170]

Hi, How to delete the row by clicking the delete icon at the end of each row, i dunt want to use the swipping to delete function...

[Tamilarasan Paranthaman]

Hi Wong Pei San,

The Flutter SfDataGrid provides the capability to load any widget in the DataGridCells. To meet your specific requirement, you can integrate the IconButton widget into the DataGridCells in the DataGridSource.buildRow method. This enables you to achieve row deletion when the button is clicked.

For your convenience, we have created a straightforward sample that addresses your needs. In this sample, we have incorporated an `IconButton` within the row cell and configured it to delete the corresponding row upon button click. Please refer to the following code snippet and sample for a more detailed understanding of this approach.

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: const Text('Syncfusion Flutter DataGrid'),

      ),

      body: SfDataGrid(

        source: employeeDataSource,

        columnWidthMode: ColumnWidthMode.fill,

        columns: <GridColumn>[

          GridColumn(

              columnName: 'id',

              label: Container(

                  padding: const EdgeInsets.all(16.0),

                  alignment: Alignment.center,

                  child: const Text(

                    'ID',

                  ))),

          GridColumn(

              columnName: 'name',

              label: Container(

                  padding: const EdgeInsets.all(8.0),

                  alignment: Alignment.center,

                  child: const Text('Name'))),

          GridColumn(

              columnName: 'designation',

              label: Container(

                  padding: const EdgeInsets.all(8.0),

                  alignment: Alignment.center,

                  child: const Text(

                    'Designation',

                    overflow: TextOverflow.ellipsis,

                  ))),

          GridColumn(

              columnName: 'salary',

              label: Container(

                  padding: const EdgeInsets.all(8.0),

                  alignment: Alignment.center,

                  child: const Text('Salary'))),

          GridColumn(

              columnName: 'delete',

              allowSorting: false,

              allowFiltering: false,

              label: Container(

                  padding: const EdgeInsets.all(8.0),

                  alignment: Alignment.center,

                  child: const Text('Action'))),

        ],

      ),

    );

  }

In DataGridSource class:

class EmployeeDataSource extends DataGridSource {

  EmployeeDataSource({required List<Employee> employeeData}) {

    dataGridRows = employeeData

        .map<DataGridRow>((e) => DataGridRow(cells: [

              DataGridCell<int>(columnName: 'id', value: e.id),

              DataGridCell<String>(columnName: 'name', value: e.name),

              DataGridCell<String>(

                  columnName: 'designation', value: e.designation),

              DataGridCell<int>(columnName: 'salary', value: e.salary),

              // Create dataGridCell for delete action icons

              const DataGridCell<Widget>(columnName: 'delete', value: null)

            ]))

        .toList();

  }

 

  List<DataGridRow> dataGridRows = [];

 

  @override

  List<DataGridRow> get rows => dataGridRows;

 

  @override

  DataGridRowAdapter buildRow(DataGridRow row) {

    return DataGridRowAdapter(

        cells: row.getCells().map<Widget>((dataGridCell) {

      return dataGridCell.columnName == 'delete'

          ? Container(

              alignment: Alignment.center,

              padding: const EdgeInsets.all(8.0),

              child: IconButton(

                icon: const Icon(

                  Icons.delete,

                  color: Colors.red,

                ),

                onPressed: () {

                  // Remove the row from data source

                  // here, the dataGridRows is the local list

                  // which is assigned to the rows property of DataGridSource.

                  dataGridRows.remove(row);

                  // Call the notifyListeners to refresh the datagrid source.

                  notifyListeners();

                },

              ),

            )

          : Container(

              alignment: Alignment.center,

              padding: const EdgeInsets.all(8.0),

              child: Text(dataGridCell.value.toString()),

            );

    }).toList());

  }

}

Regards,

Tamilarasan

Attachment: Sample_5eb56074.zip