How to make datagrid header round corner?

Question

I put a sfdatagrid in a container, which is round corner, but the datagrid header overlaps the container's topleft and topright corners. I could not find the way to make it round corner, by changing the label container or trying to configure the theme data.

Tamilarasan Paranthaman · Accepted Answer

Hi Guoliang Ying,

To achieve your requirement, you can set the clipBehavior
property of the Container to either Clip.antiAlias or Clip.hardEdge,
depending on your specific needs. This property determines how the contents of
the container are clipped when they exceed the bounds of the container. Here's
an example code snippet that demonstrates how to use clipBehavior:

@override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(title: const Text('Syncfusion
  DataGrid Demo')),
        body: Center(
          child: Container(
            clipBehavior: Clip.antiAlias,  // Use Clip.hardEdge for hard edge clipping
            height: 500,
            width: 1000,
            decoration: BoxDecoration(
              color: Colors.yellow.withOpacity(0.7),
              borderRadius:
  BorderRadius.circular(30),
              border: Border.all(
                color:
  Colors.pink,
                width:
  2,
              ),
            ),
            child: SfDataGrid(
              gridLinesVisibility:
  GridLinesVisibility.both,
              headerGridLinesVisibility:
  GridLinesVisibility.both,
              columnWidthMode:
  ColumnWidthMode.fill,
              source: _employeeDataSource,
              columns: getColumns,
            ),
          ),
        ),
      );
    }

In the code snippet above, the clipBehavior
property is set to Clip.antiAlias, which ensures that the container's
child widget is clipped with anti-aliasing, resulting in smooth rounded
corners. Alternatively, you can set it to Clip.hardEdge to achieve hard-edged
clipping.
Regards,Tamilarasan

Guoliang Ying · Answer

that's great, thank you!

Tamilarasan Paranthaman · Answer

Guoliang
Ying,If you are satisfied with our response, please mark it as
an answer. Otherwise, please let us know if you have any further queries on
this. We are happy to help you.