How can I add Tooltip for child grid (For Header and grid element) in hierarchy data binding, I have given following image for sample.

SIGN IN To post a reply.

Question

How can I add Tooltip for child grid (For
Header and grid element) in hierarchy data binding, I have given following
image for sample.

Sujith Kumar Rajkumar · Accepted Answer

Hi Akshatha,

Greetings from Syncfusion support.

If your requirement is to display the tooltip for both the parent and the child Grids, then you can achieve it using the below steps,

Initially the Grid needs to be rendered inside the EJ2 Tooltip component, for which its target property value is set as ‘.e-headercell,.e-rowcell’(These classes are added to the Grid’s header and content cell elements respectively, so the tooltip will be displayed only on hovering both of them). Then ‘mouseover’ event is bound to the Grid.

<ejs-tooltip #tooltip id="tooltip" target=".e-headercell,.e-rowcell">

<ejs-grid #grid id='Grid' [dataSource]='parentData' (mouseover)="tooltipValue($event)" [childGrid]='childGrid'>

</ejs-grid>

</ejs-tooltip>

Now in the ‘mouseover’ event, the target element content is set as Tooltip’s content using its content property. This is demonstrated in the below code snippet,

// Grid’s ‘mouseover’ event handler

tooltipValue(args) {

// Tooltip content is updated

this.tooltipObj.content = (args.target as any).innerText;

}

We have prepared a sample based on this for your reference. You can find it below,

Sample: https://stackblitz.com/edit/angular-mpmb18-gvnec1?file=app.component.html

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

However if your requirement is just to render ToolTip for the Child Grids alone, then then you can achieve it using the below steps,

Initially, bind detailDataBound event(Triggers once on each child grid expand) to the parent Grid. In this event initialize the EJ2 ToolTip component, set its target(‘.e-headercell,.e-rowcell’) and render it on the current child Grid element(It can be accessed from the target element). Then bind ‘mouseover’ event to the child Grid element.

// Parent Grid’s detailDataBound event handler

onDetailDataBound(args) {

// Current child Grid element is retrieved and ‘mouseover’ event is bound to it

var curChildGridEle = args.detailElement.querySelector('.e-grid');

curChildGridEle.addEventListener('mouseover', this.onMouseOver.bind(this));

// Tooltip is initialized and rendered on the current child Grid

const tooltipObj: Tooltip = new Tooltip({

target: '.e-headercell,.e-rowcell'

}, curChildGridEle as HTMLTableCellElement);

}

Now in the ‘mouseover’ event bound for the child Grid’s, the tooltip instance is initialized from the target element and then the target element content is set as Tooltip’s content using its content property. This is demonstrated in the below code snippet,

// Child Grid’s ‘mouseover’ event handler

onMouseOver(args) {

// Retrieves the closest tooltip class(Current child Grid element will be returned as the tooltip is bound to it)

var instances = args.target.closest('.e-tooltip').ej2_instances;

var instLength = instances.length;

// The Grid will have multiple instances of different components set on it

// Now since tooltip is bound to the Grid after Grid initialization, it will be the final instance, based on which it is retrieved

var tooltipInst = instances[instLength - 1];

// Tooltip content is updated

tooltipInst.content = (args.target as any).innerText;

}

We have prepared a sample based on this for your reference. You can find it below,

Sample: https://stackblitz.com/edit/angular-mpmb18-gmnbpl?file=app.component.ts

Note: For this case, the EJ2 JavaScript(ES6) ToolTip is rendered as it had to be initialized dynamically on child Grid render.

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

Please get back to us if you require any further assistance.

Regards,

Sujith R

Akshatha · Answer

Thank you for your support, displaying the tooltip for both the parent and child grids worked fine for me.

I have one more query,

I don't want to show tooltip for checkbox and radio button for both child and parent grid, How can I achieve this.

Sujith Kumar Rajkumar · Answer

Hi Akshatha, 
 
You’re welcome. We are glad to hear that the provided solution worked for you. 
 
As for your other query – “I don't want to show tooltip for checkbox and radio button for both child and parent grid”, you can achieve this by cancelling the tooltip open for the required cases by setting the ‘cancel’ property value of the tooltip’s beforeOpen event arguments as ‘false’. 
 
For your case, the tooltip open can be prevented by checking if the target element has any innertText(considering only the checkbox or radio button is rendered in the columns). This is demonstrated in the below code snippet, 
 




// Tooltip’s beforeOpen event handler 
beforeOpen(args) { 
      // Tooltip open is prevented if there is not inner text 
      if (args.target.innerText === "") { 
        args.cancel = true;  
      } 
} 
 
We have modified the previously provided sample based on this. You can find it below, 
 
Sample: https://stackblitz.com/edit/angular-mpmb18-lgpoxr?file=app.component.ts  
 
However if additional text content is rendered along with the checkbox or radio button in the Grid columns, then the tooltip open for this case can be prevented by checking the corresponding classes added as demonstrated in the below code snippet, 
 




// Tooltip’s beforeOpen event handler 
beforeOpen(args) { 
        // Tooltip open is prevented if it contains the specified target class 
        if (args.target.querySelector(".e-checkbox-wrapper") || args.target.querySelector(".e-radio")) { 
            args.cancel = true; 
        } 
} 
 
The element classes checked in the above code are added when the Syncfusion’s EJ2 checkbox or radio button is used. If you have rendered any other custom components then you can check the corresponding class names added for those elements to perform the above operation. 
 
We have modified the previously provided sample based on this. You can find it below, 
 
Sample: https://stackblitz.com/edit/angular-mpmb18-l1clvg?file=app.component.ts  
 
API link: https://ej2.syncfusion.com/angular/documentation/api/tooltip/#beforeopen  
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R