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,
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,
Note: For this case, the EJ2 JavaScript(ES6) ToolTip is rendered as it had to be initialized dynamically on child Grid render.
Please get back to us if you require any further assistance.
Regards,
Sujith R
