What is the best way to access to the tapped row in paginated datagrid

[Fernando de Miguel]

Hi everyone!

I have a paginated datagrid and I need to know the best way to access the selected row in the onCellDoubleTap event. I can't use the rowColumnIndex property of the DataGridCellDoubleTapDetails object because it gives me the index of the row of the current page, not of the data source.

Thanks.

[Tamilarasan Paranthaman]

Hi Fernando,

For your specific requirement, when using paging, you can obtain the tapped row using the `rowColumnIndex` property of the `DataGridCellDoubleTapDetails` through a workaround.

To implement this workaround, in the `onCellDoubleTap` event, multiply the `rowsPerPage` count by the currently selected page index and then add this value to the row index from `DataGridCellDoubleTapDetails.rowColumnIndex`. This calculation allows you to determine the actual index, and subsequently, you can retrieve the element at this index from the `DataGridSource.effectiveRows` collection.

For a more detailed understanding of this approach, we have provided a basic sample demonstrating its implementation. Please check the following code snippet and sample for more information.

class MyHomePageState extends State<MyHomePage> {

  late EmployeeDataSource _employeeDataSource;

  List<Employee> _employees = [];

  int rowsPerPage = 10;

  double pageCount = 0;

  DataPagerController dataPagerController = DataPagerController();

 

  @override

  void initState() {

    super.initState();

    _employees = populateData();

    _employeeDataSource = EmployeeDataSource(employees: _employees);

    pageCount = (_employees.length / rowsPerPage).ceilToDouble();

  }

 

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: const Text('PageNavigation Demo'),

      ),

      body: LayoutBuilder(

        builder: (context, constraints) {

          return Column(

            children: [

              SizedBox(

                  height: constraints.maxHeight - 60,

                  width: constraints.maxWidth,

                  child: SfDataGrid(

                      rowsPerPage: rowsPerPage,

                      allowSorting: true,

                      onCellDoubleTap: (details) {

                        if (details.rowColumnIndex.rowIndex > 0) {

                          int index = details.rowColumnIndex.rowIndex - 1;

 

                          int actualIndex = index +

                              (rowsPerPage *

                                  dataPagerController.selectedPageIndex);

 

                          print('actualIndex: $actualIndex');

 

                          DataGridRow dataGridRow =

                              _employeeDataSource.effectiveRows[actualIndex];

 

                          print(dataGridRow.getCells()[0].value);

                        }

                      },

                      source: _employeeDataSource,

                      columnWidthMode: ColumnWidthMode.fill,

                      columns: getColumns)),

              SizedBox(

                height: 60,

                width: constraints.maxWidth,

                child: SfDataPager(

                  pageCount: pageCount,

                  delegate: _employeeDataSource,

                  controller: dataPagerController,

                ),

              )

            ],

          );

        },

      ),

    );

  }

Regards,

Tamilarasan

Attachment: Sample_bbfcad15.zip

[Fernando de Miguel]

Hi Tamilarasan.

I like your proposal better than the one I had implemented by updating the variable in which I saved the current page every time the onPageNavigationEnd event was executed.

Thank you very much.