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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to add Tooltip for a Gird cell?

Thread ID:

Created:

Updated:

Platform:

Replies:

142898 Feb 25,2019 12:22 PM UTC Feb 26,2019 07:38 AM UTC Angular - EJ 2 5
loading
Tags: Grid
Neo
Asked On February 25, 2019 12:22 PM UTC

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 [Syncfusion]
Replied On February 26, 2019 04:43 AM UTC

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); 
    } 
} 
 
 
                              https://ej2.syncfusion.com/documentation/tooltip/getting-started/  
                              https://ej2.syncfusion.com/angular/documentation/api/grid/#querycellinfo  
 
Regards, 
Pavithra S. 


Neo
Replied On February 26, 2019 05:30 AM UTC

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); 
    } 
} 
 
 
                              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
Replied On February 26, 2019 05:34 AM UTC

Screenshot capture 2 corrected. Find the attachment.

Attachment: Capture2_corrected_3d906b35.zip

Neo
Replied On February 26, 2019 06:29 AM UTC

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 [Syncfusion]
Replied On February 26, 2019 07:38 AM UTC

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. 


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

Live Chat Icon For mobile
Live Chat Icon