Hide top and left border of a DataGrid

[3eme-oeil]

Hello everyone,
I have the same issues of a previous issue (#198) I develop a app in flutter and I use the syncfusion_flutter_datagrid packages, but this packages display line in left and in top of my grid. I see the previous issues was close and apparently this bug was being corrected in version 19.2.0.44, (https://www.syncfusion.com/feedback/24499/support-to-hide-the-top-and-bottom-borders) but I am in version 21.1.41 and I have the same problem, so what can I do ?

(I'm French, so sorry for my mistake in English language)

[Tamilarasan-Paranthaman]

Hi @3eme-oeil,

We would like to clarify that the left and top borders are considered the outer borders of the DataGrid, and it is always displayed unless the value is set to none. We have implemented this from version 20.3.47. Unfortunately, DataGrid does not provide an option to remove the left and top outer borders. 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 and top outer borders. To do this, you will need to write a CustomClip class by extending the CustomClipper class and setting Rect.fromLTWH with the grid line stroke width value for the left and top 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
  Widget build(BuildContext context) { 
    return Scaffold(
        appBar: AppBar(
          title: const Text('Flutter SfDataGrid'),
        ),
        body: Card(
          margin: const EdgeInsets.all(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, 2, size.width - 2, size.height - 2);
  }

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

Sample Link: sample.zip

Regards,
Tamilarasan

[ashok-kuvaraja]

Hi @3eme-oeil,

It appears that the workaround we've suggested may fulfill your needs. If you have any additional needs or questions, please don't hesitate to reopen it. We're here to support you.

Regards,

Ashok K