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,
with formatOptions :
Thanks,
Philippe DUFEIL
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
Hello Riva,Thank you for your prompt reply.You have completely understood my problem and your solution is exactly what I expected.
Thank you very much.
Best regards.
Philippe
Hello Riva,Thank you very much for your time. You've solved my problem.
Thank you for following up!
I have been looking into your question and I was able to reproduce the described behavior on my side. Having this in mind, what I could suggest is attaching the tooltip to the target cell in a similar manner as demonstrated in our Tooltip topic here.
Here could be found a modified sample demonstrating this approach and the result could be observed in the below attachment:
Please test it on your side and let me know how it behaves.
Hello Riva,
I'm sorry but I've another problem relating to our tooltip topic.
I take your example and add 2 columns (Qty and TotalPrice)
public data: any[] = [ { ProductID: 1, ProductName: 'Apple', Qty : 1.0, UnitPrice: 18.0, TotalPrice: 18.0, }, { ProductID: 2, ProductName: 'Orange', Qty : 1.0, UnitPrice: 25.0, TotalPrice: 18.0, }, { ProductID: 3, ProductName: 'Pear', Qty : 1.0, UnitPrice: 7.0, TotalPrice: 18.0, }, { ProductID: 4, ProductName: 'Mango', Qty : 1.0, UnitPrice: 17.0, TotalPrice: 18.0, }, ];
I assign a tooltip to TotalPrice
In my grid, i add a celledit event in order to update TotalPrice when i change Qty cell (Qty*UnitPrice = TotalPrice).
When I change the quantity, the total value is updated in the cell but the tooltip is not refreshed. The tootip still displays the old value.
Could you please have a look on this ?
Thanks a lot.
I am glad I was able to assist you regarding this matter.
Thank you for using Infragistics components.
Regards, Riva Ivanova Associate Software Developer