[syncfusion_flutter_datagrid] when onCellDoubleTap is set, secondary tap clears current selection

[dolbin-prime]

Hi, I'm using syncfusion_flutter_datagrid: ^24.1.47, and I'm making a Windows app.

I got an issue with onCellDoubleTap property.

If the property is set, every time I click right(secondary) mouse button, selected rows are gone and only clicked row remains as a selected row.

I need both onCellSecondaryTap and onCellDoubleTap property to implement my desired action, so this proplem is critical to me!

Thank you for your support.

[Tamilarasan-Paranthaman]

Hi @dolbin-prime,

Based on the details provided, we have prepared a basic sample and conducted tests on our end. However, we were unable to reproduce the reported issue. Specifically, we found that the selected rows were not being removed when right click(secondary tap) the mouse in along with the onCellDoubleTap callback.

Sample

// ignore_for_file: depend_on_referenced_packages,, avoid_print

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';

void main() {
  runApp(const MaterialApp(home: MyApp()));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: false),
      home: const SfDataGridDemo(),
    );
  }
}

class SfDataGridDemo extends StatefulWidget {
  const SfDataGridDemo({Key? key}) : super(key: key);

  @override
  SfDataGridDemoState createState() => SfDataGridDemoState();
}

class SfDataGridDemoState extends State<SfDataGridDemo> {
  List<Employee> _employees = <Employee>[];
  late EmployeeDataSource _employeeDataSource;

  @override
  void initState() {
    super.initState();
    _employees = getEmployeeData();
    _employeeDataSource = EmployeeDataSource(_employees);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Syncfusion Flutter DataGrid')),
      body: SfDataGrid(
          source: _employeeDataSource,
          selectionMode: SelectionMode.multiple,
          onCellDoubleTap: (details) {},
          onCellSecondaryTap: (details) {
            print('Cell secondary tapped');
          },
          columns: getColumns),
    );
  }

  List<GridColumn> get getColumns {
    return <GridColumn>[
      GridColumn(
          columnName: 'id',
          label: Container(
              padding: const EdgeInsets.all(8.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'))),
    ];
  }

  List<Employee> getEmployeeData() {
    return [
      Employee(10001, 'Jack', 'Manager', 150000),
      Employee(10002, 'Perry', 'Project Lead', 80000),
      Employee(10003, 'James', 'Developer', 55000),
      Employee(10004, 'Michael', 'Designer', 39000),
      Employee(10005, 'Roland Mendel', 'Developer', 45000),
      Employee(10006, 'Sven Ottlieb', 'UI Designer', 36000),
      Employee(10007, 'Williams', 'Developer', 44000),
      Employee(10008, 'Adams', 'Developer', 43000),
      Employee(10009, 'Edwards', 'QA Testing', 43000),
      Employee(10010, 'Grimes', 'Developer', 43000),
      Employee(10011, 'Maria Andres', 'Developer', 41000),
      Employee(10012, 'Thomas Hardy', 'Developer', 40000),
      Employee(10013, 'Hanna Moos', 'Sales Associate', 350000),
      Employee(10014, 'Elizabeth', 'Developer', 41000),
      Employee(10015, 'Patricio Simpson', 'Administrator', 33000),
      Employee(10016, 'Francisco Chang', 'Developer', 32000),
      Employee(10017, 'Yang Wang', 'Developer', 30000),
      Employee(10018, 'Peter Franken', 'Developer', 30000),
      Employee(10019, 'Carlos Schmitt', 'Developer', 30000),
      Employee(10020, 'Yoshi Latimer', 'Developer', 28000),
    ];
  }
}

class EmployeeDataSource extends DataGridSource {
  EmployeeDataSource(List<Employee> employees) {
    buildDataGridRows(employees);
  }

  List<DataGridRow> datagridRows = [];

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

  void buildDataGridRows(List<Employee> employeesData) {
    datagridRows = employeesData
        .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();
  }

  @override
  DataGridRowAdapter buildRow(DataGridRow row) {
    return DataGridRowAdapter(
        cells: row.getCells().map<Widget>((dataGridCell) {
      return Container(
        alignment: Alignment.center,
        padding: const EdgeInsets.symmetric(horizontal: 8.0),
        child: Text(dataGridCell.value.toString()),
      );
    }).toList());
  }
}

class Employee {
  Employee(this.id, this.name, this.designation, this.salary);
  final int id;
  final String name;
  final String designation;
  final int salary;
}

Output

Recording.2024-03-07.095612.mp4

We have attached the sample that we tested on our end for your reference. Kindly review the attached sample and run it on your end. If there are any configurations or adjustments needed to accurately reproduce the issue, please modify the sample accordingly. Additionally, please provide detailed steps for reproducing the issue along with the sample, as well as any other relevant details.

Providing a sample that accurately demonstrates the problem will enable us to conduct a more thorough investigation on our end and provide a solution promptly.

Regards,
Tamilarasan

[dolbin-prime]

Hi @Tamilarasan-Paranthaman ,

thanks to your sample, I found what was causing my problem:
In my RowSelectionManager for my data grid,
I overrided handleTap method like this:

  @override
  void handleTap(RowColumnIndex rowColumnIndex) {
    if (/* some logic to check whether 'shift' or 'ctrl' key is being pressed */) {
      super.handleTap(rowColumnIndex);
    } else {
      print('boom!');
      controller.selectedRows = [];

      super.handleTap(rowColumnIndex);
    }
  }

I wanted this overriding to be applied only to onCellTap not onCellSecondaryTap, but onCellSecondaryTap was being affected too only when onCellDoubleTap is set (I proved this by print)! Well, now the problem is changed 🙈. Is there a way to prevent onCellSecondaryTap from being affected by handleTap even if onCellDoubleTap is set? Sorry for the complicated problem I made!

[dolbin-prime]

And plus, I'm sorry that I can't attach my sample code because of my enterprise security policy.

Providing a sample that accurately demonstrates the problem will enable us to conduct a more thorough investigation on our end and provide a solution promptly.

[Tamilarasan-Paranthaman]

@dolbin-prime,

You can achieve this by incorporating a Boolean property within the RowSelectionManager class. When a right-click (secondary tap) occurs on the cell, the onCellSecondaryTap callback is triggered immediately before the RowSelectionManager.handleTap method. Within the onCellSecondaryTap callback, you can update the Boolean property to true, indicating that a secondary tap has occurred. Then, within the RowSelectionManager.handleTap method, you should only call the super method when the Boolean property is false.

Sample

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';

void main() {
  runApp(const MaterialApp(home: MyApp()));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: false),
      home: const SfDataGridDemo(),
    );
  }
}

class SfDataGridDemo extends StatefulWidget {
  const SfDataGridDemo({Key? key}) : super(key: key);

  @override
  SfDataGridDemoState createState() => SfDataGridDemoState();
}

class SfDataGridDemoState extends State<SfDataGridDemo> {
  List<Employee> _employees = <Employee>[];
  late EmployeeDataSource _employeeDataSource;
  bool isSecon = false;
  DataGridController dataGridController = DataGridController();
  CustomRowSelectionManager customSelectionManager =
      CustomRowSelectionManager();

  @override
  void initState() {
    super.initState();
    _employees = getEmployeeData();
    _employeeDataSource = EmployeeDataSource(_employees);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('Syncfusion Flutter DataGrid')),
        body: SfDataGrid(
          source: _employeeDataSource,
          columns: getColumns,
          controller: dataGridController,
          onCellDoubleTap: (details) {},
          onCellSecondaryTap: (details) {
            print('Secondary cell tap');
            customSelectionManager.isSecondaryCellTap = true;
          },
          selectionManager: customSelectionManager,
          columnWidthMode: ColumnWidthMode.fill,
          selectionMode: SelectionMode.multiple,
        ));
  }

  List<GridColumn> get getColumns {
    return <GridColumn>[
      GridColumn(
          columnName: 'ID',
          label: Container(
              padding: const EdgeInsets.all(8.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'))),
    ];
  }

  List<Employee> getEmployeeData() {
    return [
      Employee(10001, 'Jack', 'Manager', 150000),
      Employee(10002, 'Perry', 'Project Lead', 80000),
      Employee(10003, 'James', 'Developer', 55000),
      Employee(10004, 'Michael', 'Designer', 39000),
      Employee(10005, 'Roland Mendel', 'Developer', 45000),
      Employee(10006, 'Sven Ottlieb', 'UI Designer', 36000),
      Employee(10007, 'Williams', 'Developer', 44000),
      Employee(10008, 'Adams', 'Developer', 43000),
      Employee(10009, 'Edwards', 'QA Testing', 43000),
      Employee(10010, 'Grimes', 'Developer', 43000),
      Employee(10011, 'Maria Andres', 'Developer', 41000),
      Employee(10012, 'Thomas Hardy', 'Developer', 40000),
      Employee(10013, 'Hanna Moos', 'Sales Associate', 350000),
      Employee(10014, 'Elizabeth', 'Developer', 41000),
      Employee(10015, 'Patricio Simpson', 'Administrator', 33000),
      Employee(10016, 'Francisco Chang', 'Developer', 32000),
      Employee(10017, 'Yang Wang', 'Developer', 30000),
      Employee(10018, 'Peter Franken', 'Developer', 30000),
      Employee(10019, 'Carlos Schmitt', 'Developer', 30000),
      Employee(10020, 'Yoshi Latimer', 'Developer', 28000),
    ];
  }
}

class CustomRowSelectionManager extends RowSelectionManager {
  // To check whether the secondary cell is tapped or not.
  bool isSecondaryCellTap = false;
  @override
  void handleTap(RowColumnIndex rowColumnIndex) {
    if (isSecondaryCellTap) {
      isSecondaryCellTap = false;
      return;
    } else {
      return super.handleTap(rowColumnIndex);
    }
  }
}

class EmployeeDataSource extends DataGridSource {
  EmployeeDataSource(List<Employee> employees) {
    buildDataGridRows(employees);
  }

  List<DataGridRow> datagridRows = [];

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

  void buildDataGridRows(List<Employee> employeesData) {
    datagridRows = employeesData
        .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();
  }

  @override
  DataGridRowAdapter buildRow(DataGridRow row) {
    return DataGridRowAdapter(
        cells: row.getCells().map<Widget>((dataGridCell) {
      return Container(
        alignment: Alignment.center,
        padding: const EdgeInsets.symmetric(horizontal: 8.0),
        child: Text(dataGridCell.value.toString()),
      );
    }).toList());
  }
}

class Employee {
  Employee(this.id, this.name, this.designation, this.salary);
  final int id;
  final String name;
  final String designation;
  final int salary;
}

Output

Recording.2024-03-13.173820.mp4

[dolbin-prime]

Thank you @Tamilarasan-Paranthaman , I solved it thanks to your sample!