Hiding the grid line under the footer in SfDataGrid
Hey!
I'm using the SfDataGrid to show a simple editable table. I am also setting a footer, just to use as a spacer so my FAB won't hide the last row in the table:
As you can see there is a grid line at the bottom of the footer, and I don't like it being there - it just doesn't make sense for what I'm trying to do. Is there any way in which I can hide it?
Thanks!
Thanks for the reply!
Although what you have mentioned does get rid of the bottom grid line, it creates another problem:
There is now a constant footer behind the FAB, which hides the DataGrid. What I wish to have is just 'another row' in the table, with the correct height, so the FAB won't hide all the rows ab
Hi Ido,
Based on the provided information, we are unable to reproduce the reported issue. It’s working fine on our end. We have tested the following sample. In that sample, we set the SizedBox with the required height for the spacer to avoid hiding the DataGrid rows by the FAB. Please check the following code snippet. Can please provide the simple sample that is reproducible to check further?
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample-194077145
Regarding Query: What I wish to have is just 'another row' in the table, with the correct height, so the FAB won't hide all the rows ab.
Please confirm if you want to add a footer or another row (for spacer) without a bottom border at the end of the last row alone instead of a constant footer. It will be helpful for us to check on it and provide you with the solution at the earliest.
Regards,
Tamilarasan
Hi Ido,
As we already said in the previous update, the DataGrid doesn’t have support for hiding the footer or last row bottom border alone. You can achieve your requirements with the workaround i.e., setting the borders manually 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. In the Container.decoration property, set the bottom border for the DataGridRows. We have prepared the sample for that. Please check the following sample and code snippet.
|
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Flutter SfDataGrid'), ), body: Container( margin: const EdgeInsets.all(50), child: SfDataGrid( source: _employeeDataSource, columns: getColumns, columnWidthMode: ColumnWidthMode.fill, gridLinesVisibility: GridLinesVisibility.none, footerHeight: 100, footer: const SizedBox(), ), ), floatingActionButton: FloatingActionButton( shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)), onPressed: () {}, child: const Icon(Icons.add)), floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat, ); }
In buildRow method:
@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: Colors.grey.withOpacity(0.45)), )), alignment: Alignment.center, child: Text( dataGridCell.value.toString(), )); }).toList()); } |
Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample-143295379
We hope this helps. Please let us know if you need further assistance.
Regards,
Tamilarasan
