Hi Kirthika Kumar,
Greetings from Syncfusion support.
Based on the provided information, it has been observed that
you wanted to display tooltips exclusively for the content cells within the
Syncfusion Grid. By default, when the 'clipmode' property of a Grid
column is set to 'EllipsisWithTooltip', tooltips are rendered for both
header and content cells. However, we have addressed your requirement by
implementing tooltips solely for content cells. This has been achieved by
rendering the Grid within the Tooltip component with the target set to ‘e-rowcell’.
Consequently, the tooltip will only appear for Grid content cells. The content
to be displayed in the tooltip is assigned in the beforeRender event of
the tooltip. For further details, please refer to the code example and sample
provided below.
|
Index.js
function App() {
const beforeRender = (args) => {
// Triggered before rendering the tooltip
if (args.target.classList.contains('e-rowcell')) {
tooltip.content = args.target.innerText;
// Setting the tooltip content.
}
};
return (
<div>
<TooltipComponent ref={t => tooltip = t} beforeRender={beforeRender} target=".e-rowcell">
<GridComponent dataSource={inventoryData} height={315} ref={g => grid = g} allowPaging={true}>
<ColumnsDirective>
…………………………..
</ColumnsDirective>
</GridComponent></TooltipComponent></div>)
}
|
Sample: Esgac5
(forked) - StackBlitz
API Link: beforeRender
If you need any other assistance or have additional
questions, please feel free to contact us.
Regards,
Aishwarya R
