How to add tooltip on e-column header of <ejs-grid>

[Samir Modi]

Hi Team,

I am trying to add individual grid column header tooltip and not the cell itself, but it is not working. I tried to add headerTooltip property as an attribute of e-column. Have also tried to add a template but it is not picking either of the two. I have angular-popups in my project which is required for ToolTip to function.

Thanks in advance!

<ejs-grid #summaryGrid id="summaryGrid" [allowPdfExport]="true" [allowExcelExport]="true" [toolbar]='toolbarOptions' [dataSource]='data' (toolbarClick)='toolbarClick($event)'

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

[allowResizing]='true'(rowSelected)="onRowSelected($event)"

(dataBound)='dataBound()' [selectionSettings]='selectionOptions'>

<e-columns>

<e-column headerTooltip ='sample tool tip' field='date' [valueAccessor]='dateFormatter' headerText='Date' width=130>e-column>

<e-column field='totalAvailInventory' [valueAccessor]='numberFormatter' headerText='Avail Inventory ($)' width=110>e-column>

<e-column field='totalAvailInventoryAfterEx' [valueAccessor]='numberFormatter' headerText='Avail Inventory After Ex ($)' width=150>e-column>

<e-column field='totalRehypoLimit' [valueAccessor]='numberFormatter' headerText='Rehypo Limit ($)' width=130>e-column>

<e-column field='totalShorts' [valueAccessor]='numberFormatter' headerText='Shorts Demand ($)' width=150>e-column>

e-columns>

ejs-grid>

[Thavasianand Sankaranarayanan]

Hi Samir, 

Thanks for contacting Syncfusion support. 

Query : I am trying to add individual grid column header tooltip and not the cell itself, but it is not working. I tried to add headerTooltip property as an attribute of e-column. Have also tried to add a template but it is not picking either of the two. I have angular-popups in my project which is required for ToolTip to function. 

 

We have checked your query and you can achieve your requirement by using “headerCellInfo” event. We have prepared a sample in which tooltip is rendered for particular column header and not the cell itself. Please refer the below code example, sample link and documentation link. 

[app.component.ts] 

import { Tooltip } from '@syncfusion/ej2-popups'; 

@Component({ 

  selector: 'app-root', 

  templateUrl: 'app.component.html'   

}) 

export class AppComponent implements OnInit { 

  public data: Object[]; 

    @ViewChild('grid') 

    public grid: GridComponent; 

   .   .   .   .   . 

  ngOnInit(): void { 

    this.data = data.slice(0, 5); 

        .   .   .   . 

} 

headerCellInfo(args) { 

   if ( args.cell.column.field === 'CustomerID') { 

    const toolcontent = args.cell.column.headerText; 

    const tooltip: Tooltip = new Tooltip({ 

      content: toolcontent 

  }); 

   tooltip.appendTo(args.node); 

   } 

} 

} 

[app.component.html] 

<div class="control-section"> 

    <ejs-grid id="grid" #grid [dataSource]='data'   

    [editSettings]='editSettings'  

    [allowSelection]='true' [selectionSettings]='selectOptions'  

    allowPaging='true' allowFiltering='true' [filterSettings]="filterOptions" (headerCellInfo)='headerCellInfo($event)'> 

    <e-columns> 

      <e-column field='OrderID' headerText='Order ID' width='120' textAlign="Center"></e-column> 

      .  .  .  . 

    </ejs-grid> 

     

  </div> 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/tooltip-832413211  

Documentation : https://ej2.syncfusion.com/documentation/api/grid#headercellinfo  

                               https://ej2.syncfusion.com/documentation/tooltip/content/  

Regards, 

Thavasianand S. 

[Samir Modi]

Thanks a lot, i am able to achieve this using given solution. Cheers!

[Thavasianand Sankaranarayanan]

Hi Samir, 

 

We are happy that the problem has been solved. 

 

Please get back to us if you need any further assistance.  

                          

Regards, 

Thavasianand S.