Tooltip on a grid column with a formatter

I have a column in my grid (Ignite UI Angular 9.1.24) which represents a time duration. The raw value is an integer in seconds, and I use a formatter to get the string representation based on our business rules:

<igx-column field="duration" header="Duration" [sortable]="true" [formatter]="durationFormatter"></igx-column>


If I add a template to the cell for a tooltip, however, it negates the formatter. This column definition produces the integer in both the cell and the tooltip:

<div #tooltipRef="tooltip" igxTooltip>
<ng-container *ngIf="tooltipRef.context">
{{tooltipRef.context.value}}
</ng-container>
</div>
…

<igx-column field="duration" header="Duration" [sortable]="true" [formatter]="durationFormatter">
<ng-template igxCell let-cell="cell">
<span [igxTooltipTarget]="tooltipRef" (onTooltipShow)="tooltipRef.context=cell" hideDelay="50">
{{cell.value}}
</span>
</ng-template>
</igx-column>


Is there a way to bind the tooltip to the post-formatter value?

Hello Keith,

 

Thank you for posting to Infragistics Community.

 

I have been looking into your question and created a small sample with version 9.1.2 to test the code-snippets provided by you.

 

To apply the formatting on the cell value with a cell template defined, you could simply call your formatting method from within the cell template and tooltip definition, something like this: {{formatDuration(cell.value)}}.

 

However, since it is usually not recommended to call methods from within templates, my suggestion is to create a pure pipe to transform the values and apply it for the cell template and tooltip context value:

 

@Pipe({
  name: 'durationFormatter',
  pure: true
})
export class DurationFormatterPipe implements PipeTransform {
  transform(value: number, args?: any): string {
    return value.toString() + ' formatted';
  }
}

 

          
            {{cell.value | durationFormatter}}
          
        

 

  
    {{tooltipRef.context.value | durationFormatter}}
  

 

Here you can find the sample I used to test this.

 

If this is not an accurate demonstration of what you are trying to achieve, please feel free to modify the sample and send it back to me along with further details.

 

Sincerely,
Bozhidara Pachilova
Associate Software Developer