Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
530
IGX-GRID - Custom tooltip in a cell
posted

Hello,

In my grid, I manage amounts with 2 decimals. I don't want to display the decimals only in edit mode. However, I would like to display the amounts with decimals in a tooltip.

How can I do this?

My column like this,

 <igx-column header="Total"  [pinned]="false" [filterable]=false [field]="'MTT_R'" [editable]=false [cellStyles]="gris" width=120   [dataType]="'currency'"  [hasSummary]="true"  [summaries]="totalSummary" [pipeArgs]="formatOptions"></igx-column>

with formatOptions :

  public options = {
    digitsInfo: '1.0-0',
    currencyCode: 'EUR',
    display: 'symbol-narrow'
  };
  public formatOptions = this.options;

Thanks,

Philippe DUFEIL

Parents
No Data
Reply
  • 740
    Verified Answer
    Offline posted

    Hello Philippe,

    Thank you for posting into our community!

    I have been looking into your question and what I understand is that the grid’s data source looks similar to the following:

    public data: any[] = [
        {
            ProductID: 1,
            ProductName: 'Apple',
            UnitPrice: 18.00,
        },
        {
            ProductID: 2,
            ProductName: 'Orange',
            UnitPrice: 25.00,
        },
        ...
    ];

    and after the grid is rendered, the UnitPrice column values should not be displayed as decimal values, however, when hovering over the values, they should be displayed as decimals:

    Could you please confirm if my impression is correct?

    Additionally, if it is correct, an approach I could suggest is using the igxCell directive in order to template the cell and its tooltip value as desired.

    This could look similar to the following:

    <igx-column
        field="UnitPrice"
        header="UnitPrice"
        [dataType]="'currency'"
    >
        <ng-template igxCell let-value>
            <div [title]="value | currency : options.currencyCode : options.display : '1.2-2'">
                {{ value | currency : options.currencyCode : options.display : options.digitsInfo }}
            </div>
        </ng-template>
    </igx-column>

    Furthermore, a similar result could be achieved by using the IgxTooltip component:

    <igx-column
        field="UnitPrice"
        header="UnitPrice"
        [dataType]="'currency'"
    >
        <ng-template igxCell let-value>
            <div igxTooltipTarget [tooltip]="value | currency : options.currencyCode : options.display : '1.2-2'">
                {{ value | currency : options.currencyCode : options.display : options.digitsInfo }}
            </div>
        </ng-template>
    </igx-column>

    Here could be found a small sample demonstrating my suggestion. Please test it on your side and let me know if you need any further assistance regarding this matter.

    Additionally, if this is not an accurate demonstration of what you are trying to achieve, please feel free to modify it and send it back along with steps to reproduce it.

    Looking forward to your reply.

    Sincerely,
    Riva Ivanova
    Associate Software Developer

Children