How to use multiple row selection but only show selectionColor on latest selected row

[Jimmy Huang]

Hello ~ : )

If I need use multiple row selection.

May I only show selectionColor on latest selected row?

I read https://help.syncfusion.com/flutter/datagrid/conditional-styling#styling-alternate-rows
but  default selectionColor will cover row color :(

[Tamilarasan Paranthaman]

Hi Jimmy,

Regarding Query:  May I only show selectionColor on latest selected row?

By default, if you are using multiple selections, the selection color is applied to all the selected rows. It’s a behavior of the DataGrid. By following the steps, you will be able to meet your requirement.

Step 1: In the getRowBackgroundColor method, set the unique color value for the latest selected row from the dataGridController. Also, set the color to the container instead of setting it to the color property in the DataGridRowAdapter. Please check the following code snippet.

Code Snippet:

@override

  DataGridRowAdapter? buildRow(DataGridRow row) {

    Color getRowBackgroundColor(DataGridRow row, {Color? color}) {

      if (dataGridController.selectedRows.last == row) {

        return color ?? Colors.yellowAccent;

      }

      return Colors.transparent;

    }

 

    return dataGridController.selectedRows.isNotEmpty

        ? DataGridRowAdapter(

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

            return Container(

                color: getRowBackgroundColor(row),

                alignment: Alignment.center,

                child: Text(

                  dataGridCell.value.toString(),

                ));

          }).toList())

        : DataGridRowAdapter(

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

            return Container(

                color: Colors.transparent,

                alignment: Alignment.center,

                child: Text(

                  dataGridCell.value.toString(),

                ));

          }).toList());

  }

}

Step 2: In the onSelectionChanged callback, call the notifyListeners from the DataGridSource when selecting the new row. This is because, by default, buildRow will be called only for the row which is selected last. If you call notifyListeners, it will refresh all the rows. So, buildRow method will be called for every row. So, a different selection color can be applied only for latest selected row. We have prepared the sample for that. Please check the following code snippet and sample.

Code Snippet:

@override

  Widget build(BuildContext context) {

    return Scaffold(

        appBar: AppBar(title: const Text('Flutter SfDataGrid')),

        body: SfDataGridTheme(

            data: SfDataGridThemeData(),

            child: SfDataGrid(

                source: _employeeDataSource,

                columns: getColumns,

                controller: dataGridController,

                onSelectionChanged:

                    (List<DataGridRow> newRows, List<DataGridRow> oldRows) {

                  if (newRows.isNotEmpty) {

                    _employeeDataSource.updateGrid();

                  }

                },

                selectionMode: SelectionMode.multiple)));

  }

Sample Link:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample-1814915030

Regarding Query: Default selectionColor will cover row color?

It’s a behavior of the DataGrid. Because the selection color is a higher priority than the row color. If you select the rows, the selection color will be covering the row color.

We hope this helps. Please provide more details in case we misunderstood your requirement. We will be glad to assist you.

Regards,

Tamilarasan

[Jimmy Huang]

Hi Tamilarasan,
Your sample very useful.
thanks! : )

[Tamilarasan Paranthaman]

Hi Jimmy,

We are glad that the provided response meets your requirement. Please let us know if you need further assistance. As always, we are happy to help you out. 

Regards,

Tamilarasan