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> |
Regards,
Thavasianand S.
