We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

141298 Dec 5,2018 07:28 AM UTC Dec 13,2018 05:19 AM UTC Angular - EJ 2 3
loading
Tags: Grid
Samir Modi
Asked On December 5, 2018 07:28 AM UTC

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 [Syncfusion]
Replied On December 7, 2018 08:40 AM UTC

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> 


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

Regards, 
Thavasianand S. 


Samir Modi
Replied On December 12, 2018 11:50 AM UTC

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

Thavasianand Sankaranarayanan [Syncfusion]
Replied On December 13, 2018 05:19 AM UTC

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.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;