Hi
I want some clarification on the IgrGrid https://ko.infragistics.com/products/ignite-ui-react/react/components/grids/data-grid/row-grouping
I want to display precision values up to 2 decimal places after grouping rows by one or more columns.
I have used the formatOverride property in the salary column. It is working correctly for individual rows, but not for the grouped row headers, as shown in the attached screenshot.
formatOverride
Screenshot link:- https://ibb.co/ggd6bLg
I have reproduced on your given example you can see here
Please refer all the above mentioned points and suggest the approach to achieve the same.
I am using infragistics react grid version "igniteui-react": "18.4.0".
Best RegardsBharat
Hello Bharat,
Thank you for posting to our community!
I have been looking into your question and what I could suggest is using the groupDescriptionsChanged event and setting the formatOverride property of the IgrColumnGroupDescription.
This could look similar to the following:
<IgrDataGrid ... groupDescriptionsChanged={handleGroupDescriptionsChanged} > ... </IgrDataGrid>
function handleGroupDescriptionsChanged(s: IgrDataGrid, e: IgrGridGroupDescriptionsChangedEventArgs) { const salaryGroup = e.groupDescriptions.toArray().find(x => x.field === "Salary"); if (salaryGroup) { salaryGroup.formatOverride = new Intl.NumberFormat("en-EN", { minimumFractionDigits: 2, maximumFractionDigits: 2, }); } }
Please test it on your side and let me know if you need any further assistance regarding this matter.
Looking forward to your reply.
Sincerely, Riva Ivanova Software Developer