Redirect to another page when clicking on the row

[Ali Onur Özdemir]

Hello,

I want to redirect to another page with the "MetarialPageRoute" function when clicking on the line.

How can I do that?

@override

DataGridRowAdapter buildRow(DataGridRow row) {

return DataGridRowAdapter(

cells: row.getCells().map<Widget>((e) {

return e.columnName == "aboneNo"

? Container(

alignment: Alignment.center,

padding: EdgeInsets.all(8.0),

child: GestureDetector(

onTap: () {

Navigator.push(context, MaterialPageRoute(builder: (context) => e.aboneNo()));

},

child: Text(e.value)))

: Container(

alignment: Alignment.center,

padding: const EdgeInsets.all(8.0),

child: Text(e.value.toString()));

}).toList());

}

}

Thanks, best regards

[Ashok Kuvaraja]

Hi Ali Onur Özdemir,

Greetings from Syncfusion. 

As per your requirement, you can use the data grid's interaction callbacks to achieve page navigation instead of wrap cells with GestureDetector and handle the navigation inside the onTap callback. We have prepared a simple sample to demonstrate how to navigate to another screen when tapping a data grid cell. Please refer the following code snippet,

```dart
  @override

  Widget build(BuildContext context) {

    return Scaffold(

        appBar: AppBar(

            title: const Text('Syncfusion Flutter DataGrid Demo',

                overflow: TextOverflow.ellipsis)),

        body: SfDataGrid(

            source: employeeDataGridSource,

            onCellTap: (DataGridCellTapDetails details) {

              final DataGridRow row = employeeDataGridSource

                  .effectiveRows[details.rowColumnIndex.rowIndex - 1];

              Navigator.of(context).push(MaterialPageRoute(

                  builder: (context) => DataGridRowInfoPage(row: row)));

            },

            columns: <GridColumn>[

              GridColumn(

                  columnName: 'ID',

                  label: Container(

                      padding: const EdgeInsets.all(16.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'))),

            ]));

  }

```

Please refer the sample from the following link,

https://www.syncfusion.com/downloads/support/forum/173912/ze/173912-112027435

Please let us know if you required any further assistance.

Regards,
Ashok K