End editing mode of cell when clicking outside of the table

[Antonio]

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]

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