EJ2 Grid ASP.NET MVC: how to format headers - specifically to reduce padding as much as possible?

Question

Hello,I'm trying to create grid with many columns and to display as much data as possible at one screen. I've managed to reduce padding of grid cells with the following style:.e-grid .e-rowcell {        font-size: 12px;
        padding: 2px 2px 2px 2px;
    }However I'm not able to do the same for column headers. I've tried the following, it didn't make any effect:.e-grid .e-headercell {
        font-size: 12px;
        padding: 2px 2px 2px 2px;
    }Please kindly advise, how to reduce padding in header cells. As you can see in the screenshot, there is still plenty of space that can be occupied by header text, and I'll be happy to use it :)Thanks in advance!

Rahul Narayanasamy · Answer

Hi Vasyl Shepelyov, 
 
Thanks for contacting Syncfusion support. 
 
Query: How to reduce padding in header cells? 
 
We have validated your query and you can solve this by using the following method. You have to mention the selectors in more specific manner to customize the header padding. 
 
Please refer to the below selector specification. 
 




    .e-grid .e-gridheader .e-sortfilter .e-fltr-icon .e-headercelldiv { 
        font-size: 10px; 
        padding-left: 2px; 
        padding-right: 2px; 
    } 
    .e-grid .e-headercell, .e-grid .e-detailheadercell { 
        font-size: 10px; 
        padding-left: 2px; 
        padding-right: 2px; 
    } 
    .e-grid .e-gridheader tr th:first-child  { 
        padding-left: 2px; 
    } 
    .e-grid .e-gridheader tr th:last-child { 
        padding-right: 2px; 
    } 
 
Please get back to us if you need further assistance on this. 
 
Regards, 
Rahul Narayanasamy.

Vasyl Shepelyov · Answer

Hi Rahul, thanks a lot for your help, it did the job!

Rahul Narayanasamy · Answer

Hi Vasyl Shepelyov, 

Thanks for the update. We are happy to hear your problem has been resolved.  

Regards, 
Rahul Narayanasamy.

Vasyl Shepelyov · Answer

Hi Rahul,Now I've changed orientation of a header text as per this instruction:https://ej2.syncfusion.com/16.1.37/aspnet/documentation/grid/how-to.html?syntax=tag#change-the-orientation-of-the-header-textPlease advise how to reduce vertical padding now? As you can see, there is some space available but text already gets truncated.If you could also advise how to move either sorting arrow or header text little bit so that they don't overlap, that'd be really great. Please see example circled at the picture.Many thanks once again.

Dhivya Rajendran · Answer

Hi Vasyl,

Thanks for your update.

We have validated your query and we suspect that the sort icon and header texts are overlapped because of the custom CSS. To resolve the reported problem you can customize the custom CSS as per the your requirement by using the below CSS selector.

Kindly refer to the below code example for more information.

<style>

.e-grid .e-gridheader .e-sortfilter tr th:first-child .e-rightalign .e-headercelldiv {

. . . .

}

.e-grid .e-gridheader .e-sortfilter .e-rightalign .e-headercelldiv {

. . . .

}

</style>

While changing the orientation for header cells in Grid then you can use the padding left and right to move the header cell to top and bottom.

Regards,
R.Dhivya

Vasyl Shepelyov · Answer

Hi,Fighting with vertical headers, still can't achieve desired look. All I get is what's displayed in the picture under "Now". When resizing column or window, it gets truncated even more. However there are lot of free space available in the header. Could you please create an example that would produce the result as described in the picture under "To be"? This would be really helpful.Thank you!