Hi Ling,
Thanks for contacting Syncfusion support.
Kindly refer to the below documentation to display a custom tooltip in the Grid
columns.
Display custom tooltip for columns: https://helpej2.syncfusion.com/angular/documentation/grid/columns/columns?cs-save-lang=1&cs-lang=ts#display-custom-tooltip-for-columns
By using the queryCellInfo event of Grid, we displayed the data
up to 20 characters in the cell and added a custom class (ellipsisCell)
to the cells which contain more than 20 characters.
queryCellInfo: https://ej2.syncfusion.com/angular/documentation/api/grid/#querycellinfo
|
[app.component.ts]
queryCellInfo(args) {
if (args.column.type == 'string' && args.data[args.column.field] && args.data[args.column.field].length > 20) {
// shown upto 20 characters in the cell
args.cell.innerText = args.data[args.column.field].slice(0, 20) + '...';
// add the custom class to the cells
args.cell.classList.add('ellipsisCell');
}
}
|
We have shown the tooltip on the cells by setting the Tooltip target as a custom
class (ellipsisCell). In the beforeRender event,
you can dynamically bind the tooltip content.
beforeRender: https://ej2.syncfusion.com/angular/documentation/api/tooltip/#beforerender
getRowInfo: https://ej2.syncfusion.com/angular/documentation/api/grid/#getrowinfo
|
[app.component.ts]
beforeRender(args): void {
if (args.target.classList.contains('e-rowcell')) {
// event triggered before render the tooltip on target element.
this.tooltip.content = args.target.innerText;
// get the rowInfo details
var rowInfo = this.grid.getRowInfo(args.target.closest('td'));
// get the cell value
var cellValue = rowInfo.rowData[rowInfo.column['field']];
// bind the tooltip content
this.tooltip.content = cellValue;
}
|
Sample: https://stackblitz.com/edit/angular-rbx6di-ymjugx?file=src%2Fapp.component.ts,src%2Fapp.component.html
Regards,
Rajapandiyan S
