Hi
I want a small clarification on one of the use case related to IgrDataGrid (https://es.infragistics.com/products/ignite-ui-react/react/components/grids/data-grid/overview).
I have used IgrDataGrid, in that when I try to set initial summary description with the following code snippet.
const summary: IgrColumnSummaryDescription[] = [];
const summaryColumn= new IgrColumnSummaryDescription(); summaryColumn.field = 'TestColumn'; summaryColumn.displayName = 'Test Display Name'; summaryColumn.calculatorDisplayName = ''; summaryColumn.operand = DataSourceSummaryOperand.Sum; summary.push(summaryColumn);
This is the code snippet I'm using , here I'm passing displayName = 'Test Display Name' and calculatorDisplayName as Empty string still I'm getting result TestColumn sum 555 , as displayName is 'Test Display Name' and calculatorDisplayName is Empty string so I'm expecting result like this Test Display Name 555
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,
From your description, it sounds like you are looking to show some custom text instead of “Sum” in the summary. You can do this using the calculatorDisplayName property of the IgrColumnSummaryDescription that you are defining. For example, using a summary of the following:
const peopleCount = new IgrColumnSummaryDescription(); peopleCount.field = "Photo"; peopleCount.operand = DataSourceSummaryOperand.Count; peopleCount.calculatorDisplayName = "THIS IS CALC DISPLAY NAME"; this.grid.summaryDescriptions.add(peopleCount);
This will result in a summary view like the attached screenshot. For reference, the sample that was modified with the above summary and shown in the screenshot is downloadable here: https://github.com/IgniteUI/igniteui-react-examples/tree/master/samples/grids/data-grid/overview.
Please let me know if you have any other questions or concerns on this matter.
Hello Andrew,
Thank you for your response. We have tried the same, but getting an issue here. The field name is also showing with the calculatorDisplayName in the final output.
I have set the groupSummaryDisplayMode="List" summaryScope="Groups"
Let me know if some other information is required from our end.
Thanks.
Thank you for your update on this matter.
In the group descriptions, the displayName of the IgrColumnSummaryDescription is what is supposed to represent the column name. It appears that we may have an issue at the moment though, in that if this is null or an empty string, it seems to be getting ignored. I believe this to be a bug in the IgrDataGrid, and I have logged it on our Ignite UI for React GitHub page, here: https://github.com/IgniteUI/igniteui-react/issues/33.
As a workaround to this to achieve your desired result, my best recommendation is to utilize formatText property of the summary description like so:
peopleCount.formatText = this.formatTextHandler;
…where this.formatTextHandler is:
public formatTextHandler(s: IgrColumnSummaryDescription, e: IgrFormatSummaryTextEventArgs){ e.formattedText = "My Formatted Text"; }
The above e.formattedText setting will give you complete control over the entire string that is shown for that particular summary in the group row. There are other parts on the IgrFormatSummaryTextEventArgs that can give you information about the column that the summary is applied to or the value of the summary as well.
Thank you for your response. Can you please let us know how we can achieve the desire text and summary value as well, with the help of formatTextHandler or any other option.
By using
groupSummaryDisplayMode="List"summaryScope="Groups"
The following code can help you to achieve the “Test Display Name 555” that you had originally asked about:
//Hook this into the IgrColumnSummaryDescription.formatText handler public onFormatText(s: IgrColumnSummaryDescription, e: IgrFormatSummaryTextEventArgs){ e.formattedText = “Test Display Name” + e.summaryResult.value; }