adding button in sfdatagrid get whole row details onTap

Question

I am adding SfDataGrid to my web app in Flutter Every thing works fine only one issue i am facing as below.

Below is my DataSourceMethod for SfDataGrid`

class EmployeeDataSource extends DataGridSource {
  EmployeeDataSource({required List<Employee> employees}) {
    _employees = employees
        .map<DataGridRow>((e) => DataGridRow(cells: [
      DataGridCell<int>(columnName: 'id', value: e.id),
      DataGridCell<String>(columnName: 'status', value: e.status),
      DataGridCell<String>(columnName: 'name', value: e.name),
      DataGridCell<String>(columnName: 'heartbeat', value: e.heartbeat),
      DataGridCell<String>(columnName: 'visibility', value: e.visibility),
      DataGridCell<String>(columnName: 'location', value: e.location),
      DataGridCell<String>(columnName: 'connectors', value: e.connectors),
      DataGridCell<String>(columnName: 'actions', value: e.actions),
    ])).toList();
  }

  List<DataGridRow>  _employees = [];

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

  @override
  DataGridRowAdapter? buildRow(DataGridRow row) {
    return DataGridRowAdapter(
        cells: row.getCells().map<Widget>((dataGridCell) {
          return dataGridCell.columnName == "status" ?
          Container(
            alignment: Alignment.centerLeft,
            padding: EdgeInsets.all(16.0),
            child: Icon(
              Icons.circle,
              color:
              colorFromCssString(
                functions.getStatusColor(dataGridCell.value),
                defaultColor:
                Colors.black,
              ),
              size:
              24,
            ),
          ) : dataGridCell.columnName == "actions" ?
          Row(
            children: [
              FlutterFlowIconButton(
                borderColor: Colors.transparent,
                borderRadius: 30,
                borderWidth: 1,
                buttonSize: 60,
                icon: Icon(
                  Icons.edit,
                  color: Color(0xFF13345B),
                  size: 30,
                ),
                onPressed: () {
                  print('IconButton pressed ...');
                },
              ),
              FlutterFlowIconButton(
                borderColor: Colors.transparent,
                borderRadius: 30,
                borderWidth: 1,
                buttonSize: 60,
                icon: Icon(
                  Icons.remove_red_eye,
                  color: Color(0xFF13345B),
                  size: 30,
                ),
                onPressed: () async {

                 //So When I Tap On This Button I need Entire Row Details.
                },
              ),
            ],
          ) :
          Container(
            alignment: Alignment.centerLeft,
            padding: EdgeInsets.all(16.0),
            child: Text(
              dataGridCell.value.toString(),
              textAlign: TextAlign.start,
            ),
          );
        }).toList());
  }
}

I am not able to get index when i click on button. Any one have idea how to get a particular row data when click on a button. I searched a lot but i only get data onCellTap method not on Button which i have added in DataGridRowAdapter.

Please help me on this if anyone have any idea. Thanks In Advance

Answer 1

You can get the entire details of the corresponding row from the row property in the buildRow method.

class EmployeeDataSource extends DataGridSource {
  EmployeeDataSource({required List<Employee> employees}) {
    _employees = employees
        .map<DataGridRow>((e) => DataGridRow(cells: [
              DataGridCell<int>(columnName: 'id', value: e.id),
              DataGridCell<String>(columnName: 'status', value: e.status),
              DataGridCell<String>(columnName: 'name', value: e.name),
              DataGridCell<String>(columnName: 'heartbeat', value: e.heartbeat),
              DataGridCell<String>(
                  columnName: 'visibility', value: e.visibility),
              DataGridCell<String>(columnName: 'location', value: e.location),
              DataGridCell<String>(
                  columnName: 'connectors', value: e.connectors),
              DataGridCell<String>(columnName: 'actions', value: e.actions),
            ]))
        .toList();
  }

  List<DataGridRow> _employees = [];

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

  @override
  DataGridRowAdapter? buildRow(DataGridRow row) {
    return DataGridRowAdapter(
        cells: row.getCells().map<Widget>((dataGridCell) {
      return dataGridCell.columnName == "status"
          ? Container(
              alignment: Alignment.centerLeft,
              padding: const EdgeInsets.all(16.0),
              child: Icon(
                Icons.circle,
                color: dataGridCell.value == 'available'
                    ? Colors.green
                    : Colors.red,
                size: 24,
              ),
            )
          : dataGridCell.columnName == "actions"
              ? Row(
                  children: [
                    IconButton(
                      icon: const Icon(
                        Icons.edit,
                        color: Color(0xFF13345B),
                        size: 30,
                      ),
                      onPressed: () {
                        print('IconButton pressed ...');
                      },
                    ),
                    IconButton(
                      icon: const Icon(
                        Icons.remove_red_eye,
                        color: Color(0xFF13345B),
                        size: 30,
                      ),
                      onPressed: () async {
                        // You can get the entire details of the corresponding row when tapping on the button
                        print('ID ${row.getCells()[0].value}');
                        for (var details in row.getCells()) {
                          print(details.value);
                        }
                      },
                    ),
                  ],
                )
              : Container(
                  alignment: Alignment.centerLeft,
                  padding: const EdgeInsets.all(16.0),
                  child: Text(
                    dataGridCell.value.toString(),
                    textAlign: TextAlign.start,
                  ),
                );
    }).toList());
  }
}