We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

147728 Sep 22,2019 02:53 PM UTC Oct 1,2019 05:16 AM UTC ASP.NET MVC (Classic) 5
loading
Tags: Grid
Vasyl Shepelyov
Asked On September 22, 2019 02:53 PM UTC

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 [Syncfusion]
Replied On September 26, 2019 11:05 AM UTC

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. 
 
                              https://ej2.syncfusion.com/aspnetmvc/documentation/grid/columns/#autofit-specific-columns 
 

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


Vasyl Shepelyov
Replied On September 29, 2019 04:50 AM UTC

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 [Syncfusion]
Replied On September 30, 2019 12:02 PM UTC

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, 
 
 
Let us know if you have any concerns. 
 
Regards, 
Pavithra S. 


Vasyl Shepelyov
Replied On September 30, 2019 06:14 PM UTC

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 [Syncfusion]
Replied On October 1, 2019 05:16 AM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon