Grid header: how to make grid header text appear on separate line from filter icon. Is it possible to wrap header text?

[Vasyl Shepelyov]

Hi,

I'd appreciate if someone could advise on the following:

Is it possible to show ASP.NET MVC grid header text on separate line from filter icon? When columns are narrow, all text gets hidden behind filter icon, it would be good to achieve something like shown on the picture below.

And another helpful thing would be to wrap grid header text, can it be done?

Thank you in advance.

[Pavithra Subramaniyam]

Hi Vasyl, 

 

Thanks for contacting Syncfusion support. 

 

From your Screenshot we suspect that you are using EJ2 ASP.NET MVC Grid. If so you can achieve your requirement by enabling the Auto Wrap feature of grid component.  Or you can fit the column width to the largest content of the Column by using the AutoFit column feature. Please refer to the below documentation and sample link for more information. 

 

Documentation: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/cell/#auto-wrap 

                              https://ej2.syncfusion.com/aspnetmvc/documentation/grid/columns/#autofit-specific-columns 

 

Demo                 : https://ej2.syncfusion.com/javascript/demos/#/material/grid/auto-wrap.html 

If you are using the ASP.NET MVC(Classic) please share the code example for more validation. 

 

Regards, 

Pavithra S. 

[Vasyl Shepelyov]

Thank you, Pavithra, this is helpful.

However, if I switch text wrapping on, text doesn't utilize space above filter icon (please see marked yellow in the picture). Is it possible to use this area somehow? Ideally, filter icon to be on a separate line and rest of the text to appear above it, wrapped and taking whole width of the column (i.e. text box and filter icon box not to share the same line). Is it achievable?

Thank you,

Vasyl

[Pavithra Subramaniyam]

Hi Vasyl, 

 

Yes, It is possible to move the filter icon to the next line in the header column. This can be achieved by overriding the following styles in the grid component, 

 

<style> 

            .e-grid .e-headercell, .e-grid .e-detailheadercell { 

                padding-right: 0 !important; 

            } 

 

            .e-grid .e-headercelldiv { 

                padding-right: 0 !important; 

                margin-right: 0 !important; 

            } 

 

            .e-grid .e-filtermenudiv { 

                margin: 0 93%; 

            } 

</style> 

 

Overriding the above styles moves the filter icon to the start of the column in the next line. Using this you can move the filter icon to your desired position. These values may vary based on the grid size since we have manually overridden the pre-defined styles. 

 

Please find the sample for your reference below, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/147728/ze/header_filter_icon-696338061  

 

Let us know if you have any concerns. 

 

Regards, 

Pavithra S. 

[Vasyl Shepelyov]

Hi Pavithra,

Many thanks for your help, proposed solution did the job for me after changing a margin percentage little bit.

Best regards,

Vasyl

[Pavithra Subramaniyam]

Hi Vasyl, 

 

Thanks for your update. 

 

We are glad to know that the provided solution helped you. 

 

Please get back to us if you need any assistance on this. 

 

Regards, 

Pavithra S.