add icon or hyperlink with headertext in ecolumn tag

[RakhiS]

  HI,

for example in the below line of code, I want add icon or hyperlink with headerText "From Step". Is it possible? If yes please do the needful

<e-column field='StepName' headerText='From Step' [filter]='filterSettings'></e-column>

[Rajapandi Ravi]

Hi RakhiS, 

Greetings from syncfusion support 

Based on your query we suspect that you like to display a icon or hyperlink in the Grid headers. You can achieve your requirement by using HeaderTemplate feature of EJ2 Grid. We have already discussed about your requirement in our documentation. Please refer the below documentation for more information. 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/columns/#header-template 

If you like to add a hyperlink in the header, please follow the below way to achieve your requirement. Please refer the below code example and sample for more information. 

 

App.component.html 

<ejs-grid [dataSource]='data' allowPaging='true' height=365 [pageSettings]='initialPage'> 

        <e-columns> 

            .  .  .  .  .  .  . 

            <e-column field='CustomerName' headerText='Customer Name' width='150'> 

               <ng-template #headerTemplate let-data> 

                            <div> 

                            <a rel='nofollow' href="https://ej2.syncfusion.com/angular/documentation/grid/columns/#header-template">Customer Name</a> //hyper link 

                            </div> 

                        </ng-template> 

            </e-column> 

           .  .  .  .  .  .  .  . 

        </e-columns> 

    </ejs-grid> 

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

Regards, 

Rajapandi R

[anshul Udapure]

I want to apply icon after filter menu option. how to do it ?

[Rajapandi Ravi]

Rakhis,

You can add your custom icon in the place of filter menu by using the Custom CSS, based on your query we have prepared a sample and we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information.

Index.html

 

<style>

    .e-grid .e-sortfilterdiv:not(.e-icon-ascending):not(.e-icon-descending)::before {

      content: "\e300";

      /* Actual icon here: content: "\ea7f";*/

      font-size: .9em;

      /* styling */

    }

  </style>

 

Sample: https://stackblitz.com/edit/angular-wggisu-6ckhqx?file=app.component.html,app.component.ts,index.html