Hide column header in ejsGrid

[Jairo Martins Marques]

How to hide column header in ejsGrid?

I have a simple grid but I don't want to show the column header. I know that I can set headerText to '', but the column header still there, empty but using a row space.

My simple grid:

<ejs-grid #Grid id='grid' class="margin-top-10 nav-grid-margin pane" height='100%' width='100%'

allowSelection='true' [allowSorting]='true' [allowGrouping]='true'

[dataSource]='dataSource' [groupSettings]='groupSettings' [showHide]='true'

(rowSelected)='onGridRowSelected($event)' (rowDeselected)='onGridRowDeselected($event)'>

<e-columns>

<e-column headerText='' width='52' clipMode='ellipsiswithtooltip'>

<ng-template #template let-data>

<div class="nav-icon {{data.icon}}"></div>

</ng-template>

</e-column>

<e-column field='description' headerText='' clipMode='ellipsis'></e-column>

<e-column field='module' headerText='[Module]'></e-column>

<e-column field='id' headerText='Id' isPrimaryKey='true' [visible]='false'></e-column>

<e-column headerText='' width='80' textAlign='left'>

<ng-template #template let-data>

<i class="material-icons">{{data.favorite}}</i>

</ng-template>

</e-column>

</e-columns>

</ejs-grid>

[Mohammed Farook J]

Hi Jairo, 

Thanks for contacting Syncfusion Support. 

We have validated the provided code example. We can hide the grid column header row by using custom CSS only.  Please find the code example. 

To hide the grid header row 

    .e-grid .e-gridheader { 

        display: none; 

    } 

We found that you have enabled grid grouping also. So we must be set the width of grouping indent cell. Please find the code example. 

    .e-grid .e-groupcaption, 

    .e-grid .e-indentcell, 

    .e-grid .e-recordplusexpand, 

    .e-grid .e-recordpluscollapse { 

        width: 17px 

    } 

Note :  if we hide the grid column header , we can able to group only programmatically (by using groupColumn() method of Grid). 

Please find the sample and documentation for your reference. 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/grid-cli1255845203.zip  

groupColumn() : https://ej2.syncfusion.com/16.1.37/angular/documentation/grid/api-gridComponent.html#groupcolumn 

screenshot: 

without column header 

 

without column header with grouping  

 

 

 

This solution does not match your requirement, Could you please explain briefly about your requirement. 

 

Regards, 

J Mohammed Farook 

[Jairo Martins Marques]

J Mohammed Farook,

Thank you very much.

I needed to change some other css stuff because with just the configuration suggested by you the grid was misconfigured. So I used the css below:

.e-grid .e-icon-gdownarrow,

.e-grid .e-icon-grightarrow {

text-indent: 1px;

}

.e-grid .e-gridheader {

display: none;

}

.e-grid .e-recordplusexpand,

.e-grid .e-recordpluscollapse

{

width: 5px;

padding-left: 10px;

}

.e-grid .e-groupcaption,

.e-grid .e-indentcell,

.e-grid .e-recordplusexpand,

.e-grid .e-recordpluscollapse

{

padding-left: 20px;

}

[Mohammed Farook J]

Hi Jairo, 

 

We are happy to hear your requirement worked. Also thanks for your suggestion. 

 

Please get back to us if you need further assistance. 

 

Regards, 

J. Mohammed Farook