Tree Grid cell with Tooltip

[Cesar Smerling]

How can I create a custom tooltip (with custom html and data that depende on that row) in a cell.

I tried this guide https://ej2.syncfusion.com/angular/documentation/grid/how-to/custom-tool-tip-for-columns/ but is not working, no tooltip is shown.

This is my queryCellInfo method (I apply a style border):

customiseCell(args) {
    if (args.column.field === 'definition.propertyLabel') {
        const rowType = args.data['definition']['rowType'];
        if (this.showBorderOnCommand)
            switch (rowType) {
                case BaselineRowType.Node_State: {
                    args.cell.classList.add('scs-node-border');
                    break;
                }
                case BaselineRowType.Node_Content: {
                    args.cell.classList.add('scs-node-part-border');
                    break;
                }
                case BaselineRowType.Material_Content: {
                    args.cell.classList.add('scs-material-border');
                    break;
                }
                case BaselineRowType.Material_Component: {
                    args.cell.classList.add('scs-component-border');
                    break;
                }
            }
        if (this.showBorderOnValue)
            switch (rowType) {
                case BaselineRowType.Node_State_Value: {
                    args.cell.classList.add('scs-node-border');
                    break;
                }
                case BaselineRowType.Node_Content_Value: {
                    args.cell.classList.add('scs-node-part-border');
                    break;
                }
                case BaselineRowType.Material_Content_Value: {
                    args.cell.classList.add('scs-material-border');
                    break;
                }
                case BaselineRowType.Material_Component_Spec:
                case BaselineRowType.Material_Component_Value: {
                    args.cell.classList.add('scs-component-border');
                    break;
                }
            }

        }
        let tooltip: Tooltip = new Tooltip({
            content: args.data[args.column.field].toString()
        }, args.cell);
    }

[Gowri Loganathan]

Hi Cesar, 

Thanks for contacting Syncfusion Forum. 

Query: Customize the treegrid cell tooltip using queryCellInfo  

 

We have achieved your requirement using queryCellInfo event of TreeGrid. Kindly refer the below code example 

Code  

Html page 

 

<ejs-treegrid #treegrid [dataSource]='data' childMapping='subtasks' [treeColumnIndex]='1' [allowPaging]=true (queryCellInfo)='customiseCell($event)'[pageSettings]='pageSettings'> 

     <e-columns> 

      ..................... 

     </e-columns> 

    </ejs-treegrid> 

 

Component.ts page 

 

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

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

…………….. . 

   customiseCell(args: QueryCellInfoEventArgs) {  // define the queryCellInfo event here 

        if (args.column.field === 'taskName') { //use your field name 

 

            // do you stuff for customization here // 

 

        } 

        const tooltip: Tooltip = new Tooltip({ 

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

        }, args.cell); 

    } 

Output 

 

Please refer the below sample link, 

https://stackblitz.com/edit/angular-gjyzgb-qwqjtt 

Also refer to the below API link, 

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

After referring the above solution still facing issue kindly get back to us with the below details, 

1. Share us the complete TreeGrid code Or reproduce the issue in the attached sample.

Regards, 

Gowri V L