How to Hide a Column in a Grid

[Dave Monks]

How do you hide a column in an ejGrid?
I thought it would be as simple as setting visible to false, however the below is not working for me as the column is still being displayed.

    <e-column field="ID" [isPrimaryKey]="true" editType="numericedit" headerText="ID" width="10" visible="false" textAlign="right"></e-column>

Anyone know why this doesn't work and what I should do instead?

Dave

[Saravanan Arunachalam]

Hi Dave, 

Thanks for contacting Syncfusion’s support. 

We have analyzed your provided code example and we have modified your to achieve your specified requirement. Please refer to the below code example. 

<e-column field="ID" [isPrimaryKey]="true" editType="numericedit" headerText="ID" width="10" [visible]="false" textAlign="right"></e-column> 

 

Regards, 

Saravanan A. 

[Dave Monks]

Thank you, can't believe it was something so simple.

[Saravanan Arunachalam]

Hi Dave,  

Thanks for your update.       

We are happy that the provided information helped you. 

Regards, 

Saravanan A. 

[Rama Prabha]

Hai there,

I have followed the same thing to hide tree grid column by making [visible]=false and it worked. But in column chooser this hidden column appeared.

FYR, in the image provided below, id is a hidden column which is not appeared in tree grid. While triggering choose column 'id' appeared.

Query : How to hide hidden-column name in column chooser?

[Pon Selva Jeganathan]

Hi Rama, 

 

Thanks for contacting syncfusion forum. 

 

Query : How to hide hidden-column name in column chooser? 

 

Based on your query, we suggest you use the showInColumnChooser property of the treegrid column. Using the showInColumnChooser property, you can hide the particular column in column chooser. 

 

Please refer to the below code snippet, 

 

 <ejs-treegrid 

    [dataSource]="data" 

    allowPaging="true" 

    …. 

  > 

    <e-columns> 

      <e-column 

        field="taskID" 

        headerText="Task ID" 

        width="70" 

        textAlign="Right" 

      ></e-column> 

      <e-column 

        field="taskName" 

        headerText="Task Name" 

        width="200" 

        [visible]="false" 

        [showInColumnChooser]="false" 

      ></e-column> 

 

 

Please refer to the below screenshot, 

 

 

Please refer to the below sample, 

https://stackblitz.com/edit/angular-sqeg5g?file=app.component.html 

 

Please refer to the below help API documentation, 

https://ej2.syncfusion.com/documentation/api/treegrid/column/#showincolumnchooser 

 

If does not meet your requirement, kindly Confirm whether you are using Essential Javascript1/ Essential Javascript2. 

 

Kindly get back to us for further assistance. 

 

Regards,   

Pon selva   

[Rama Prabha]

Hi,

It perfectly worked. Thank you.

Regards,

Rama Prabha

[Pon Selva Jeganathan]

Hi Rama,  

 

Thanks for the update. 

 

We are glad to hear your query has been solved by our solution. 

 

Kindly get back to us for further assistance. We are happy to assist you. 

 

Regards, 

Pon selva