Grid header sort, filter icons placement below header text

[Sandip Mane]

Hello,

I am using Syncfusion blazor grid with allowsorting & allowfiltering properties to show sort and filter icons respectively as below.

I want those 2 icons to appear below header text. i.e. Below 1Y% text in above image case.

I am having many columns in the grid with short width and hence want to move sort, filter icons to the next line in the header row to save some width space and hence the requirement. I tried few options with styles , but it just messes up whole header and not getting aligned properly. Thanks.

[Naveen Palanivel]

Hi Sandip Mane,

We checked your query, and it seems that you want the sort and filter icons in the Grid to appear below the column header text instead of next to it. We achieved your requirement using CSS styles. Please refer to the code snippet and attached screenshot for more information.

Sample : https://blazorplayground.syncfusion.com/embed/BtreZANSjSgrzOPJ?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

<style>

    .e-grid .e-gridheader .e-sortfilter .e-fltr-icon .e-headercelldiv{

        margin : 0px;

    }

 

    .e-grid .e-gridheader .e-fltr-icon .e-sortfilterdiv{

        margin : 0px;

    }

 

    .e-grid .e-sortfilterdiv {

        margin: 0px;

        float: left;

       

    }

 

    .e-grid .e-filtermenudiv

    {

        margin: 0px;

        float: left;

    }

</style>

Regards,
Naveen

[Sandip Mane]

great! thanks.

[Naveen Palanivel]

Hi Sandip,

Welcome.

Kindly get back to us if you have further queries. As always we will be assist you.

Regards,
Naveen