GridLinesVisibility keeps showing left-most vertical line even when set to horizontal

[notsag-dev]

Version: 21.1.37

For some reason the left-most vertical line of the grid is always shown even if I set the lines visibility to horizontal like this:

gridLinesVisibility: GridLinesVisibility.horizontal,
headerGridLinesVisibility: GridLinesVisibility.horizontal,

Any ideas why?

Thanks.

[Tamilarasan-Paranthaman]

Hi @notsag-dev,

Thank you for bringing up your concern about the leftmost border of the DataGrid. We would like to clarify that the left border is considered as the outer border of the DataGrid, and it is always displayed unless the value is set to none. Unfortunately, the DataGrid does not provide an option to remove the left outer border. However, we do have a workaround that you can use to achieve your requirement. You can use the ClipRect widget with CustomClipper to remove the left outer border. To do this, you will need to write a CustomClip class by extending the CustomClipper class and set the Rect.fromLTWH with the required value for the left in the getClip method. Afterward, you can wrap the DataGrid as a child of ClipRect. To assist you further, we have prepared a simple sample that demonstrates how to implement this workaround. Please refer to the following code snippet and sample for more information.

@override
  void initState() {
    super.initState();
    _employees = getEmployeeData();
    _employeeDataSource = EmployeeDataSource(_employees);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Flutter SfDataGrid'),
        ),
        body: Container(
          margin: const EdgeInsets.only(left: 20),
          child: ClipRect(
            clipper: CustomLeftClipper(),
            child: SfDataGrid(
              columnWidthMode: ColumnWidthMode.fill, 
              source: _employeeDataSource,
              columns: getColumns,
            ),
          ),
        ));
  }

In CustomLeftClipper class:

class CustomLeftClipper extends CustomClipper<Rect> {
  @override
  Rect getClip(Size size) {
    return Rect.fromLTWH(2, 0, size.width - 2, size.height);
  }

  @override
  bool shouldReclip(CustomClipper<Rect> oldClipper) => false;
}

sample.zip

Regards,
Tamilarasan

[notsag-dev]

Thank you @Tamilarasan-Paranthaman. I'll try this workaround one of these days as I decided to keep all the borders for now.

I understand this isn't a priority maybe but when using horizontal lines, the border on the left is shown but not the one on the right which makes the horizontal lines option a bit useless IMO as the grid looks broken. Thank you for the workaround, though.