Flutter DataGrid (SfDataGrid) MultiSelection,Double Tap Issue

[abdulrehmananwar]

1- Double Tap is not working smooth as i sharing you a video sample. when i double click using mouse it not doing on double tap i have to click multiple times using mouse on windows app.
2- Multi Selection
when i press and down arrow key it dont include starting row. like my focused row index is 2 i press shift and down arrow key it dont include index 2 into the selection.

20.02.2024_05.03.00_REC.mp4

[abdulrehmananwar]

one more issue when dialog open i have to press down arrow key twice then it got focus to gridview. i want it on signle arrow key it do functional

[abdulrehmananwar]

One More Issue when i long press Down Arrow Key it only move one time. it should need be move down to down on Long press down arrow key as excel or other grids work

[Tamilarasan-Paranthaman]

Hi @abdulrehmananwar,

Regarding: Double Tap Issue and Multi Selection issue.

After examining the details and video you provided, we developed a basic sample for our evaluation. Upon testing, we encountered no issues; the double-tap functionality is operating as intended, and row selection using the Shift + Arrow Down key combination is accurately performed without any issues. For your reference, we've included both the sample and a video demonstration to showcase the functionality.

Video Output

Recording.2024-02-21.115732.mp4

Sample

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

void main() {
  runApp(const 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 MyDataGridHomePage(),
    );
  }
}

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

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

class MyDataGridHomePageState extends State<MyDataGridHomePage> {
  late EmployeeDataSource _employeeDataSource;
  late List<Employee> _employees;
  @override
  void initState() {
    super.initState();
    _employees = populateData();
    _employeeDataSource = EmployeeDataSource(_employees);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Syncfusion DataGrid Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                showDialog(
                    context: context,
                    builder: (context) => AlertDialog(
                        title: const Text('Flutter SfDataGrid'),
                        actions: [
                          ElevatedButton(
                              onPressed: () {
                                Navigator.pop(context);
                              },
                              child: const Text('Close')),
                        ],
                        content: SizedBox(
                            height: 400, width: 700, child: buildDataGrid())));
              },
              child: const Text('Open Dialog'),
            ),
          ],
        ),
      ),
    );
  }

  buildDataGrid() {
    return SfDataGrid(
      source: _employeeDataSource,
      columns: getColumns,
      onCellDoubleTap: (details) {
        print('Cell double tapped');
      },
      selectionMode: SelectionMode.multiple,
      columnWidthMode: ColumnWidthMode.fill,
    );
  }

  List<GridColumn> get getColumns {
    return <GridColumn>[
      GridColumn(
          columnName: 'ID',
          label:
              Container(alignment: Alignment.center, child: const Text('ID'))),
      GridColumn(
          columnName: 'Name',
          label: Container(
              alignment: Alignment.center, child: const Text('Name'))),
      GridColumn(
          columnName: 'Designation',
          label: Container(
              alignment: Alignment.center,
              child: const Text(
                'Designation',
                overflow: TextOverflow.ellipsis,
              ))),
      GridColumn(
          columnName: 'Salary',
          label: Container(
              alignment: Alignment.center, child: const Text('Salary'))),
    ];
  }
}

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;
}

List<Employee> populateData() {
  return [
    Employee(10001, 'Jack', 'Manager', 150000),
    Employee(10002, 'Perry', 'Lead', 80000),
    Employee(10003, 'James', 'Developer', 55000),
    Employee(10004, 'Michael', 'Designer', 39000),
    Employee(10005, 'Maria', 'Developer', 45000),
    Employee(10006, 'Edwards', 'UI Designer', 36000),
    Employee(10008, 'Adams', 'Developer', 43000),
    Employee(10009, 'Edwards', 'QA Testing', 43000),
    Employee(10010, 'Grimes', 'QA Testing', 43000),
    Employee(10011, 'Maria Andres', 'UI Designer', 41000),
    Employee(10016, 'Francisco Chang', 'Developer', 32000),
    Employee(10017, 'Yang Wang', 'Developer', 29000),
    Employee(10018, 'Peter Franken', 'Developer', 28000),
    Employee(10019, 'Carlos Schmitt', 'Developer', 28000),
    Employee(10020, 'Pedro Afonso', 'Developer', 26000),
    Employee(10021, 'Sven Ottlieb', 'Developer', 22000),
    Employee(10022, 'Janine Labrune', 'Developer', 22000),
    Employee(10023, 'Ann Devon', 'Developer', 22000),
    Employee(10024, 'Roland Mendel', 'Developer', 22000),
    Employee(10025, 'Aria Cruz', 'Developer', 20000),
    Employee(10026, 'Martine Rancé', 'Developer', 20000),
    Employee(10027, 'Maria Larsson', 'Developer', 20000),
    Employee(10028, 'Diego Roel', 'Developer', 20000),
    Employee(10029, 'Peter Franken', 'Developer', 20000),
    Employee(10030, 'Carine Schmitt', 'Developer', 20000),
    Employee(10031, 'Paolo Accorti', 'Developer', 20000),
    Employee(10032, 'Lino Rodriguez', 'Developer', 20000),
    Employee(10033, 'Jonas Bergulfsen', 'Developer', 20000),
    Employee(10034, 'Jose Pavarotti', 'Developer', 20000),
    Employee(10035, 'Patricia McKenna', 'Developer', 20000),
    Employee(10036, 'Helen Bennett', 'Developer', 20000),
    Employee(10037, 'Carlos Hernández', 'Developer', 20000),
  ];
}

Regarding: one more issue when dialog open I have to press down arrow key twice then it got focus to grid view.

According to the DataGrid implementation, the initial press of the down arrow key brings focus to the DataGrid. With the subsequent press, now that the DataGrid is focused, the down arrow key's row selection functionality is activated, leading to the selection of the first row. This accounts for the necessity of two down arrow key presses to select a row, which is an inherent behavior of the DataGrid.

However, to meet your specific requirement, you can implement a workaround at the sample level. By wrapping the DataGrid within a Focus widget and utilizing the onFocusChange property, you can programmatically set the selected row index upon focus. This allows you to initiate the row selection functionality with the first down key press. We have prepared a sample demonstrating this approach for your convenience. Please review the sample and accompanying code snippet for implementation details.

Sample

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

void main() {
  runApp(const 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 MyDataGridHomePage(),
    );
  }
}

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

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

class MyDataGridHomePageState extends State<MyDataGridHomePage> {
  late EmployeeDataSource _employeeDataSource;
  late List<Employee> _employees;
  DataGridController dataGridController = DataGridController();

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Syncfusion DataGrid Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                showDialog(
                    context: context,
                    builder: (context) => AlertDialog(
                        title: const Text('Flutter SfDataGrid'),
                        actions: [
                          ElevatedButton(
                              onPressed: () {
                                Navigator.pop(context);
                              },
                              child: const Text('Close')),
                        ],
                        content: SizedBox(
                            height: 400, width: 700, child: buildDataGrid())));
              },
              child: const Text('Open Dialog'),
            ),
          ],
        ),
      ),
    );
  }

  buildDataGrid() {
    return Focus(
      onFocusChange: (hasFocus) {
        if (hasFocus) {
          if (dataGridController.selectedIndex == -1) {
            dataGridController.selectedIndex = 0;
          }
        }
      },
      child: SfDataGrid(
        source: _employeeDataSource,
        columns: getColumns,
        controller: dataGridController,
        selectionMode: SelectionMode.multiple,
        columnWidthMode: ColumnWidthMode.fill,
      ),
    );
  }

  List<GridColumn> get getColumns {
    return <GridColumn>[
      GridColumn(
          columnName: 'ID',
          label:
              Container(alignment: Alignment.center, child: const Text('ID'))),
      GridColumn(
          columnName: 'Name',
          label: Container(
              alignment: Alignment.center, child: const Text('Name'))),
      GridColumn(
          columnName: 'Designation',
          label: Container(
              alignment: Alignment.center,
              child: const Text(
                'Designation',
                overflow: TextOverflow.ellipsis,
              ))),
      GridColumn(
          columnName: 'Salary',
          label: Container(
              alignment: Alignment.center, child: const Text('Salary'))),
    ];
  }
}

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;
}

List<Employee> populateData() {
  return [
    Employee(10001, 'Jack', 'Manager', 150000),
    Employee(10002, 'Perry', 'Lead', 80000),
    Employee(10003, 'James', 'Developer', 55000),
    Employee(10004, 'Michael', 'Designer', 39000),
    Employee(10005, 'Maria', 'Developer', 45000),
    Employee(10006, 'Edwards', 'UI Designer', 36000),
    Employee(10008, 'Adams', 'Developer', 43000),
    Employee(10009, 'Edwards', 'QA Testing', 43000),
    Employee(10010, 'Grimes', 'QA Testing', 43000),
    Employee(10011, 'Maria Andres', 'UI Designer', 41000),
    Employee(10016, 'Francisco Chang', 'Developer', 32000),
    Employee(10017, 'Yang Wang', 'Developer', 29000),
    Employee(10018, 'Peter Franken', 'Developer', 28000),
    Employee(10019, 'Carlos Schmitt', 'Developer', 28000),
    Employee(10020, 'Pedro Afonso', 'Developer', 26000),
    Employee(10021, 'Sven Ottlieb', 'Developer', 22000),
    Employee(10022, 'Janine Labrune', 'Developer', 22000),
    Employee(10023, 'Ann Devon', 'Developer', 22000),
    Employee(10024, 'Roland Mendel', 'Developer', 22000),
    Employee(10025, 'Aria Cruz', 'Developer', 20000),
    Employee(10026, 'Martine Rancé', 'Developer', 20000),
    Employee(10027, 'Maria Larsson', 'Developer', 20000),
    Employee(10028, 'Diego Roel', 'Developer', 20000),
    Employee(10029, 'Peter Franken', 'Developer', 20000),
    Employee(10030, 'Carine Schmitt', 'Developer', 20000),
    Employee(10031, 'Paolo Accorti', 'Developer', 20000),
    Employee(10032, 'Lino Rodriguez', 'Developer', 20000),
    Employee(10033, 'Jonas Bergulfsen', 'Developer', 20000),
    Employee(10034, 'Jose Pavarotti', 'Developer', 20000),
    Employee(10035, 'Patricia McKenna', 'Developer', 20000),
    Employee(10036, 'Helen Bennett', 'Developer', 20000),
    Employee(10037, 'Carlos Hernández', 'Developer', 20000),
  ];
}

[abdulrehmananwar]

22.02.2024_12.46.44_REC.mp4

double tap some time work some time not work please check there must be some issue at your side

[abdulrehmananwar]

while 1st issue is still there when i press shift and down arrow key focused row dont get selected.

[Tamilarasan-Paranthaman]

@abdulrehmananwar,

Regarding: Double tap some time work some time does not work.

Based on the provided video reference, we suspect that the cell was not double tapped properly, possibly due to a gap between the two taps. Upon retesting the sample provided in our previous response, we found it to be functioning correctly without any issues on our end. We kindly request that you ensure to double tap the cell accurately, without any time gap between the two taps.

Output Video

Recording.mp4

Regarding: When I press shift and down arrow key focused row don’t get selected.

We are not entirely certain about the specific use case of the issue you are encountering. We conducted further testing by selecting the row and pressing the shift + down arrow on our end, and it functioned properly without any issues. The rows were accurately selected as expected.

We have retested the sample attached in our previous response to confirm its functionality. However, if there is any misunderstanding regarding your particular use case, we kindly request that you provide more specific and clear details. This additional information will greatly assist us in thoroughly examining your request and delivering an appropriate solution.

[ashok-kuvaraja]

Hi @abdulrehmananwar,

We suspect that the reported issue has been resolved at your end. Therefore, I am closing this ticket. If you need any further assistance, kindly reopen this issue. We are always happy to help you.

Regards,
Ashok K