I am roughly on latest AG/ID (14.2).
I have a data grid which represents scenarios (name, start, end, etc.) to which users want to add a field for comments (to describe purpose for oddly-suffixed scenario names). Adding the field is simple enough, but the intent is to use that comment as the mouse-hover text for the scenario name.
How is it that I set a mouse-hover text value for a field which is declared as below, and how to I reference the same row's comment field?
<igx-column [pinned]="true" field="name" header="Scenario Name" [dataType]="'string'" [resizable]="true" width="12%" [sortable]="true"> <ng-template igxCellEditor let-cell="cell"> <igx-input-group type="border"> <input igxInput [igxFocus]="true" [(ngModel)]="cell.editValue" (ngModelChange)="modelChange($event, cell, 'name')" displayDensity="compact" /> </igx-input-group> </ng-template> </igx-column>
Hello Chris,
Thank you for posting to Infragistics Community!
I have created this sample demostrating how the IgxGrid’s Cell Templating functionality can be leveraged in combination with the IgxTooltip capabilities to easily achieve your requirement.
The approach involves creating a cell display template that can be as simple as the default one, however, the element displaying the cell value has the addition of being set as a tooltip target. The same could be achieved for the cell editing template, of course. The tooltip reference template itself is defined within this cell template and displays a value from the exposed cell context:
<igx-column field="ProductName" header="Product Name" [dataType]="'string'"> <ng-template igxCell let-cell="cell" let-val let-row> <span #target="tooltipTarget" [igxTooltipTarget]="tooltipRef">{{ val }}</span> <div #tooltipRef="tooltip" igxTooltip> {{ cell.row.data.QuantityPerUnit }} </div> </ng-template> </igx-column>
I hope this suggestion helps. If you require any further assistance on the matter, please, let me know.
Best regards, Bozhidara Pachilova Associate Software Developer
I would love to say that worked, but I also need the input in that column and putting them together isn't working for me, either by meshing the tooltip code into the existing template or by adding another template to the same column.
It's using the scenario name as the tooltip, not the column value I'm attempting to designate.
Here is current code:
<igx-column [pinned]="true" field="name" header="Scenario Name" [dataType]="'string'" [resizable]="true" width="12%" [sortable]="true"> <ng-template igxCellEditor let-cell="cell" let-val let-row> <span #target="tooltipTarget" [igxTooltipTarget]="tooltipRef">{{ val }}</span> <div #tooltipRef="tooltip" igxTooltip> {{ cell.row.data.createdBy }} </div> <igx-input-group type="border"> <input igxInput [igxFocus]="true" [(ngModel)]="cell.editValue" (ngModelChange)="modelChange($event, cell, 'name')" displayDensity="compact" /> </igx-input-group> </ng-template> </igx-column>
Even removing the input code doesn't populate the right value for the tooltip: it's still just the scenario name. I assume I'm missing something in the .ts file, but I don't see anything that seems relevant.