End editing mode of cell when clicking outside of the table

Question

I would like to know if there is a way to call the method submitCell() and end editing mode when you click outside of the table

What I would like to happen:

I enter editing mode

I write a value

I click outside of the table and the cell calls the method onSubmit(), just like when you press enter

What actually happens

I enter editing mode

I write a value

I click outside of the table and the cell stays in editing mode

Is there some way to change this behavior?

Ashok Kuvaraja · Answer

Hi Antonio,Syncfusion Flutter DataGrid supports programmatically ending editing. You can end editing by calling DataGridController.endEdit() method. We handle the end edit when tapping outside the DataGrid by wrapping GestureDetector as a parent widget of the Scaffold and handling it inside the onTap event. Please check the following code snippets,@override  void initState() {    super.initState();    employees = getEmployeeData();    employeeDataSource = EmployeeDataSource(employeeData: employees);  }  @override  Widget build(BuildContext context) {    return GestureDetector(      onTap: () {      // Call this method to end the editing programmatically.        _dataGridController.endEdit();      },      child: Scaffold(        appBar: AppBar(          title: const Text('Syncfusion Flutter DataGrid'),        ),        body: SfDataGrid(          source: employeeDataSource,          allowEditing: true,          selectionMode: SelectionMode.single,          navigationMode: GridNavigationMode.cell,          controller: _dataGridController,          columns: <GridColumn>[            GridColumn(                columnName: 'id',                label: Container(                    padding: EdgeInsets.all(16.0),                    alignment: Alignment.center,                    child: Text(                      'ID',                    ))),            GridColumn(                columnName: 'name',                label: Container(                    padding: EdgeInsets.all(8.0),                    alignment: Alignment.center,                    child: Text('Name'))),            GridColumn(                columnName: 'designation',                label: Container(                    padding: EdgeInsets.all(8.0),                    alignment: Alignment.center,                    child: Text(                      'Designation',                      overflow: TextOverflow.ellipsis,                    ))),            GridColumn(                columnName: 'salary',                label: Container(                    padding: EdgeInsets.all(8.0),                    alignment: Alignment.center,                    child: Text('Salary'))),          ],        ),      ),    );  }  Regards,Ashok K