I need to show all column values when hover the row of the grid.
I can able to add every cell titles,
but is there any option to show tooltip only adding in igx-column level. (it should available for all the cell hover)
Kindly do reply.
Thanks.
Hi Renukadevi,
Thank you for posting to Infragistics Community!
The current approach to adding a tooltip for a cell is by creating a custom cell display template for its contents, for example:
<ng-template igxCell let-cell="cell" #tooltipTemplate let-value> <div #target="tooltipTarget" [igxTooltipTarget]="tooltipRef"> {{ cell.value }} </div> <div #tooltipRef="tooltip" igxTooltip class="tooltiplGrid"> {{ cell.value }} </div> </ng-template>
In order not to repeat this template for each column, one could reuse it by defining it once and assigning it to each column by leveraging the IgxGrid’s columnInit event:
@ViewChild('tooltipTemplate', { static: true }) public tooltipTemplate: TemplateRef<any>; //.. public onColumnInit(event: IgxColumnComponent) { event.bodyTemplate = this.tooltipTemplate; }
Here is a small sample I prepared for you to demonstrate this.
Apart from that, defining a tooltip via a single property on the column is not something currently built into the IgxGrid and would be a candidate for a feature request. Such could be logged in the igniteui-angular GitHub repo here.
Best regards,Bozhidara PachilovaSoftware Developer
Hello,
Thanks for your reply,
I need to display even if that cell has no value.
My requirement is to display that particular row values when hovering on every cell, even also the cell has no value.
thanks.
That would be a matter of defining the template. For reference, I have modified the previously linked sample so that some cells have no value and a empty tooltip is shown for them as well.
Of course, please, feel free to adjust the code according to your specific requirements.
If you need any further assistance, please, let me know.