how to set row border color depandent on row's cell value?
Currently, DataGrid does not provide direct support to customising the border for any cell based on condition. But, you can achieve your requirement at sample level by following these steps,
Step 1: Set the gridLinesVisibility to GridLinesVisibility.none
Step 2: In the DataGridSource.buildRow method, you can set the border for the individual cell with the required color based on the conditions.
|
class EmployeeDataSource extends DataGridSource { EmployeeDataSource(List<Employee> employees) { buildDataGridRow(employees); getRowIndex(); }
void buildDataGridRow(List<Employee> employeeData) { dataGridRow = employeeData.map<DataGridRow>((employee) { return DataGridRow(cells: [ DataGridCell<int>(columnName: 'id', value: employee.id), DataGridCell<String>(columnName: 'name', value: employee.name), DataGridCell<String>( columnName: 'designation', value: employee.designation), DataGridCell<int>(columnName: 'salary', value: employee.salary), ]); }).toList(); }
List<DataGridRow> dataGridRow = <DataGridRow>[];
@override List<DataGridRow> get rows => dataGridRow.isEmpty ? [] : dataGridRow;
@override DataGridRowAdapter? buildRow(DataGridRow row) { return DataGridRowAdapter( cells: row.getCells().map<Widget>((dataGridCell) { return Container( decoration: BoxDecoration( border: Border( bottom: BorderSide(width: 1.0, color: getColor(dataGridCell, row)), right: BorderSide(width: 1.0, color: getColor(dataGridCell, row)), top: BorderSide(width: 1.0, color: getColor(dataGridCell, row)), )), alignment: Alignment.center, padding: const EdgeInsets.symmetric(horizontal: 16.0), child: Text( dataGridCell.value.toString(), overflow: TextOverflow.ellipsis, )); }).toList()); }
List<int> rowIndex = [];
getRowIndex() { for (DataGridRow row in dataGridRow) { int index = dataGridRow.indexOf(row); for (int i = 0; i <= 3; i++) { if (row.getCells()[i].value == 33000) { rowIndex.add(index); } } } }
Color getColor(DataGridCell dataGridCell, DataGridRow row) { int index = dataGridRow.indexOf(row);
if (rowIndex.contains(index)) { return Colors.red; } else { return Colors.grey.withOpacity(0.45); } } } |
We have also prepared a sample for that. Please check this sample and let us know if you need any further assistance.
Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample1207324536
Regards,
Tamilarasan
As per your requirement, if you set the navigation mode to GridNavigationMode.row then the current cell style color which is set in the DataGridCurrentCellStyle.borderColor is applied to the current row border color too. We have prepared the sample for that. Please check the sample and let us know if it meets your requirement.
Code Snippet:
|
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('Flutter SfDataGrid')), body: SfDataGridTheme( data: SfDataGridThemeData( currentCellStyle: const DataGridCurrentCellStyle( borderWidth: 1, borderColor: Colors.red)), child: SfDataGrid( source: _employeeDataSource, columns: getColumns, columnWidthMode: ColumnWidthMode.fill, navigationMode: GridNavigationMode.row, selectionMode: SelectionMode.multiple, ))); } } |
Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample-168781058
Regards,
Tamilarasan
