allowEditing property

bool allowEditing
final

Decides whether cell should be moved into edit mode based on editingGestureType.

Defaults to false.

Editing can be enabled only if the selectionMode is other than none and navigationMode is cell.

You can load the required widget on editing using DataGridSource.buildEditWidget method.

The following example shows how to load the TextField for id column by overriding the onCellSubmit and buildEditWidget methods in DataGridSource class.


class EmployeeDataSource extends DataGridSource {

 TextEditingController editingController = TextEditingController();

 dynamic newCellValue;

 /// Creates the employee data source class with required details.
  EmployeeDataSource({required List<Employee> employeeData}) {
    employees = employeeData;
    _employeeData = 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),
            ]))
        .toList();
  }

  List<DataGridRow> _employeeData = [];

  List<Employee> employees = [];

  @override
  List<DataGridRow> get rows => _employeeData;

  @override
  DataGridRowAdapter buildRow(DataGridRow row) {
    return DataGridRowAdapter(
        cells: row.getCells().map<Widget>((e) {
      return Container(
        alignment: (e.columnName == 'id' || e.columnName == 'salary')
            ? Alignment.centerRight
            : Alignment.centerLeft,
        padding: EdgeInsets.all(8.0),
        child: Text(e.value.toString()),
      );
    }).toList());
  }

  @override
  Widget? buildEditWidget(DataGridRow dataGridRow,
      RowColumnIndex rowColumnIndex, GridColumn column, submitCell) {
    // To set the value for TextField when cell is moved into edit mode.
    final String displayText = dataGridRow
            .getCells()
            .firstWhere((DataGridCell dataGridCell) =>
                dataGridCell.columnName == column.columnName)
            .value
            ?.toString() ??
        '';

    /// Returning the TextField with the numeric keyboard configuration.
    if (column.columnName == 'id') {
      return Container(
          padding: const EdgeInsets.all(8.0),
          alignment: Alignment.centerRight,
          child: TextField(
            autofocus: true,
            controller: editingController..text = displayText,
            textAlign: TextAlign.right,
            decoration: const InputDecoration(
                contentPadding: EdgeInsets.all(0),
                border: InputBorder.none,
                isDense: true),
            inputFormatters: [
              FilteringTextInputFormatter.allow(RegExp('[0-9]'))
            ],
            keyboardType: TextInputType.number,
            onChanged: (String value) {
              if (value.isNotEmpty) {
                newCellValue = int.parse(value);
              } else {
                newCellValue = null;
              }
            },
            onSubmitted: (String value) {
              /// Call [CellSubmit] callback to fire the canSubmitCell and
              /// onCellSubmit to commit the new value in single place.
              submitCell();
            },
          ));
    }
  }

  @override
  void onCellSubmit(DataGridRow dataGridRow, RowColumnIndex rowColumnIndex,
      GridColumn column) {
    final dynamic oldValue = dataGridRow
            .getCells()
            .firstWhereOrNull((DataGridCell dataGridCell) =>
                dataGridCell.columnName == column.columnName)
            ?.value ??
        '';

    final int dataRowIndex = rows.indexOf(dataGridRow);

    if (newCellValue == null || oldValue == newCellValue) {
      return;
    }

    if (column.columnName == 'id') {
      rows[dataRowIndex].getCells()[rowColumnIndex.columnIndex] =
          DataGridCell<int>(columnName: 'id', value: newCellValue);

      // Save the new cell value to model collection also.
      employees[dataRowIndex].id = newCellValue as int;
    }

    // To reset the new cell value after successfully updated to DataGridRow
    //and underlying mode.
    newCellValue = null;
  }
}

The following example shows how to enable editing and set the DataGridSource for SfDataGrid.


List<Employee> employees = <Employee>[];

late EmployeeDataSource employeeDataSource;

@override
void initState() {
  super.initState();
  employees = getEmployeeData();
  employeeDataSource = EmployeeDataSource(employeeData: employees);
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('Syncfusion Flutter DataGrid'),
    ),
    body: SfDataGrid(
      source: employeeDataSource,
      allowEditing: true,
      columnWidthMode: ColumnWidthMode.fill,
      selectionMode: SelectionMode.single,
      navigationMode: GridNavigationMode.cell,
      columns: <GridColumn>[
        GridColumn(
            columnName: 'id',
            label: Container(
                padding: EdgeInsets.all(16.0),
                alignment: Alignment.centerRight,
                child: Text(
                  'ID',
                ))),
        GridColumn(
            columnName: 'name',
            label: Container(
                padding: EdgeInsets.all(8.0),
                alignment: Alignment.centerLeft,
                child: Text('Name'))),
        GridColumn(
            columnName: 'designation',
            label: Container(
                padding: EdgeInsets.all(8.0),
                alignment: Alignment.centerLeft,
                child: Text(
                  'Designation',
                  overflow: TextOverflow.ellipsis,
                ))),
        GridColumn(
            columnName: 'salary',
            label: Container(
                padding: EdgeInsets.all(8.0),
                alignment: Alignment.centerRight,
                child: Text('Salary'))),
      ],
    ),
  );
}

See also,

Implementation

final bool allowEditing;