Hi
I want a small clarification on one of the use case related to IgrDataGrid (https://www.infragistics.com/products/ignite-ui-react/react/components/grids/data-grid/overview).
I have used IgrDataGrid, in that I want to apply Summary Row , so whenever we open the grid ,summary row should be there.
Currently we can only apply column summary using filter UI option.
We wanted to add this feature programmatically in every numeric column when the grid is loaded.
So, for this I need to know how can we achieve that , If there is any solution for this please suggest as I need to implement this in my IgrDataGrid.
Hoping for a positive response.
Thanks!!!
Hello Shubham,
In order to add summaries to the IgrDataGrid programmatically, you can add an IgrColumnSummaryDescription element to the summaryDescriptions collection of the grid. The following sample in our online documentation demonstrates this in the componentDidMount method: https://www.infragistics.com/products/ignite-ui-react/react/components/grids/data-grid/overview#react-data-grid-example.
For reference, here is the code that applies the Count summary to the “Photo” column in that sample:
const peopleCount = new IgrColumnSummaryDescription(); peopleCount.field = "Photo"; peopleCount.operand = DataSourceSummaryOperand.Count; this.grid.summaryDescriptions.add(peopleCount);
Please let me know if you have any other questions or concerns on this matter.
Hi Andrew,
We tried the same, but this caused some other issues. While adding column summaries we encountered that there were two summary rows (a screenshot is attached below of the sample).
Note: Also, we weren't able to get a modified summary row when a user edits a cell in the above column having a column summary.
We are attaching the sample (it uses a function component ) as well for your better understanding.
Let me know if some other information is required from our end.
Thanks.
Sample:InfragisticsGridExample.zip
Thank you for your update on this matter. I have been investigating into the behavior you are seeing, and I have a few explanations and recommendations of why the code is working in the way that it is.
1. Currently, you are getting more than one summary row because the summaries are being applied in the ref of the grid. The corresponding event handler for this will fire each time the page renders, and since the IgrColumnSummaryDescription is being added unchecked, this can result in multiple rows for the same summary. I would recommend checking whether or not a summary already exists or invoke the clear() method on the summaryDescriptions collection of the grid in the ref prior to adding your summaries first.
2. The summaries are returning 0 because your data types are strings that represent numbers rather than actual numeric types. Your data needs to be numeric in order to do a Sum summary on it.
Your recommendation provided positive results and solved most of my problems.
I just need another suggestion related to the display format of column summary data:
1) Currently, the values shown in the summary column are right-aligned. We want it to be left aligned as are grid data is also left aligned ( we can't change the alignment of the grid as we want to present it in that way only).
2) We have removed the "Sum" label from the summary column. But we want to show another description text in the first column summary, eg "Total" in the first column so as to give the user an idea of what is going on in the summary row.
Added a screenshot of the above query so as to give a better idea (also attached the same if the image isn't clear):
Ideally, we want a description of "Total" under the "Name" summary column and all of the summary values left aligned.
Inserted Image :
Thank you for your update on this matter.
Unfortunately, at the time of writing this, neither of the new requests you are asking for are supported in the IgrDataGrid. That is, there does not exist the ability to re-align the summaries or create a “grand total” type of label for the summaries.
Regarding the label, it is possible to change the label that is shown for the summary by changing the calculatorDisplayName property on the IgrColumnSummaryDescription that you apply to the grid to the caption that you want to show.
If you would like to see the ability to change the alignment of the summaries in the IgrDataGrid or have a "global caption" for the summaries, I would recommend suggesting a new feature request at our Ignite UI for React GitHub page, here: https://github.com/igniteui/igniteui-react/issues. This will place you in direct communication with our product management teams who plan and prioritize upcoming features and development based on community and user feedback.