How to add Tooltip for a Gird cell?

[Neo]

Hi all,

I'm using 'ejs-grid' and columns created by using "columns" property.

field: 'chart', headerText: 'Chart', textAlign: 'Center', width: '35'

, template: this.gridChartTemplate

this.myGrid.Columns = this.myFields; // 'myFields' is an array which included column settings.

<ng-template let-column #gridChartTemplate let-data>

<img src="assets/graphicon.PNG" class="chart-link-icon" (click)="gridChartClicked(data)">

</ng-template>

My requirement is to add Tooltip for that particular cell. How we can archive that?

Thank you.

[Pavithra Subramaniyam]

Hi Shamil, 

 

Greetings from Syncfusion. 

 

Query : My requirement is to add Tooltip for that particular cell. How we can archive that? 

 

You can achieve your requirement by using the “queryCellInfo” event of Grid component. In that event you can add the custom Tooltip component for the cells based on your required conditions. Please refer to the below code example and documentation link for more information. 

 

@Component({ 

    selector: 'app-container', 

    template: `<ejs-grid #grid [dataSource]='data' [height]='315' (queryCellInfo)='tooltip($event)' > 

                    <e-columns> 

                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column> 

                        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column> 

                        <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column> 

                        <e-column field='ShipName' headerText='Ship Name' width=120></e-column> 

                    </e-columns> 

                </ejs-grid>` 

}) 

export class AppComponent implements OnInit { 

 

    public data: Object[]; 

 

    ngOnInit(): void { 

        this.data = data; 

    } 

    tooltip(args: QueryCellInfoEventArgs){ 

         // you can also add tooltip based on condition here 

        let tooltip: Tooltip = new Tooltip({ 

        content: args.data[args.column.field].toString(); 

        }, args.cell); 

    } 

} 

 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/how-to/custom-tool-tip-for-columns/  

                              https://ej2.syncfusion.com/documentation/tooltip/getting-started/  

                              https://ej2.syncfusion.com/angular/documentation/api/grid/#querycellinfo  

 

Regards, 

Pavithra S. 

[Neo]

Hi Shamil, 

 

Greetings from Syncfusion. 

 

Query : My requirement is to add Tooltip for that particular cell. How we can archive that? 

 

You can achieve your requirement by using the “queryCellInfo” event of Grid component. In that event you can add the custom Tooltip component for the cells based on your required conditions. Please refer to the below code example and documentation link for more information. 

 

@Component({ 

    selector: 'app-container', 

    template: `<ejs-grid #grid [dataSource]='data' [height]='315' (queryCellInfo)='tooltip($event)' > 

                    <e-columns> 

                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column> 

                        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column> 

                        <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column> 

                        <e-column field='ShipName' headerText='Ship Name' width=120></e-column> 

                    </e-columns> 

                </ejs-grid>` 

}) 

export class AppComponent implements OnInit { 

 

    public data: Object[]; 

 

    ngOnInit(): void { 

        this.data = data; 

    } 

    tooltip(args: QueryCellInfoEventArgs){ 

         // you can also add tooltip based on condition here 

        let tooltip: Tooltip = new Tooltip({ 

        content: args.data[args.column.field].toString(); 

        }, args.cell); 

    } 

} 

 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/how-to/custom-tool-tip-for-columns/  

                              https://ej2.syncfusion.com/documentation/tooltip/getting-started/  

                              https://ej2.syncfusion.com/angular/documentation/api/grid/#querycellinfo  

 

Regards, 

Pavithra S. 

Hi Pavithra,

I followed your solution and changes done in my code as it is. But I'm getting code error, (Screenshots are attached)

import { FilterSettingsModel, IFilter, Grid, Resize, ContextMenuItemModel, ContextMenuService, ToolbarItems, EditSettingsModel, SaveEventArgs, DialogEditEventArgs, BeginEditArgs, BeforeBatchAddArgs, BeforeBatchSaveArgs, GridComponent, BatchCancelArgs } from '@syncfusion/ej2-ng-grids';

import { QueryCellInfoEventArgs } from '@syncfusion/ej2-angular-grids';

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

My imports like above.

Attachment: Screenshots_85c201ce.zip

[Neo]

Screenshot capture 2 corrected. Find the attachment.

Attachment: Capture2_corrected_3d906b35.zip

[Neo]

Problem solved. Some changes done in "tooltip" event.

tooltip(args: QueryCellInfoEventArgs) {

// you can also add tooltip based on condition here

let tooltip: Tooltip = new Tooltip({

content: args.data[args.column.field].toString()

}, args.cell as HTMLElement);

}

Thank you very much Syncfusion team.

[Pavithra Subramaniyam]

Hi Shamil, 

 

Thanks for your update. 

 

We are happy that your requirement has been achieved. 

 

Please contact us if you need any further assistance on this. 

 

Regards, 

Pavithra S. 

[Michael Sage]

I wish there was more to the example on how to stylize the tooltip better. Perhaps that was in this link, but the link is broken.

https://ej2.syncfusion.com/angular/documentation/grid/how-to/custom-tool-tip-for-columns/

[Vikram Sundararajan]

Hi Michael,

Greetings from Syncfusion support,

Based on your query custom tooltip documentation link was not opened. Please refer the below link for custom tooltip for columns,

Custom-tooltip: https://ej2.syncfusion.com/angular/documentation/grid/cell#display-custom-tooltip-for-columns

Please get back us if you need further assistance.

Regards,

Vikram S