How to make datagrid header round corner?

[Guoliang Ying]

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]

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]

that's great, thank you!

[Tamilarasan Paranthaman]

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.