Hi Team,
We are currently using igx version 14.2.17 . we are using multiheader grid we are pinning the columns when i try to export the grid . pinned column values are not getting exported. Could you please help me in this.
Thanks
Vijay
Hello,
I have been looking into your question and what I found is that the described behavior in the given sample could be considered as an issue. The loss of information about the column and the value of grouped rows after exporting the grid to Excel is due to the fact that the grid itself has only multi-column headers, i.e. igx-column-group components that have igx-column components in them. It seems that placing the grouped rows information about the grouping of the column and its values can only be thought under a single column and cannot be thought about under a column group.
I have logged this behavior in our GitHub repository, and you can view the issue here. Any concerns or questions that you have can be directly addressed in the issue, which will give you the opportunity to directly communicate with our development team.
In order to receive a notification whenever a new information is available, please make sure that you are subscribed to the issue. This can be achieved via “Subscribe” button.
However, what I could suggest as a workaround until the described behavior is fixed is to put a single igx-column component at the beginning of the grid before the multi-column headers.
<igx-column [header]="'Grouped Information'"></igx-column>
In this way, after grouping and exporting to excel group rolls, the information will be placed under the given single column and will be available in the excel file as well.
The described scenario could be observed here:
In addition, I have prepared small sample illustrating this behavior which could be found here. Please test it on your side and let me know how it behaves.
Thank you for your cooperation.
Regards,
Georgi Anastasov
Entry Level Software Developer
Infragistics
HI @Gerogi, Thanks for your response. I have followed same steps as per your stackblitz. I have created a stackblitz sample. I am still facing the same issue layerName is not getting exported. Please find the stackblitz sample below
https://stackblitz.com/edit/angular-ouju1g-sguepx?file=src%2Fapp%2Fdata%2FinvoiceData.ts,src%2Fapp%2Fgrid%2Fgrid-groupby-sample%2Fgrid-groupby-sample.component.ts,src%2Fapp%2Fgrid%2Fgrid-groupby-sample%2Fgrid-groupby-sample.component.html
Please refer the below Screenshot layerName and its value is not getting exported. is there any way we can change label from layerName to any customized text.
Please help me to resolve this issue.
I have been looking into your question and this is the expected behavior of the igx-grid component along with the group by feature. What I want to point out is that the export of the grid to excel is done for the grid data itself in the given cells and columns, but it does not refer to the actual display of the data in the grid and how you have changed it to be displayed in a given format.
That is, in the given case you can see that there is an ng-template element that handles the igxCell directive and presents the dates in the date column in a different format, but after export the dates are in the format in which the value from the cell itself is and not in the displayed format. The same applies to the ng-template element that handles the igxGroupByRow directive. There you put different texts on the group rows of the grid, but they are only for display and are not the fields of the columns of the grid itself or given values from the data, that is, they are not exported to Excel because they are given text that you display for the moment in the grouping of the rows in the grid.
What I also understand from your question is that you want to export given ‘Application’ and ‘Test’ columns and therefore write their fields in the given ng-template element with igxGroupByRow directive, but they are not exported. What I think is that there has been a misunderstanding here on the part of the group by feature itself. You may have written the given column fields in the template for the group rows, but as you can see, the grid itself is already grouped by two other columns, which are ‘Ship Country’ and ‘Ship City’. To group the grid by your two columns, ‘Application’ and ‘Test’, you can remove the already grouped ones and drag yours into the group by field or set the grid to be initially grouped by these columns with the groupingExpressions property of the grid.
<igx-grid #grid1 [data]="data" [groupingExpressions]="expr" ></igx-grid>
this.expr = [ { dir: SortingDirection.Asc, fieldName: ‘Application’, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }, { dir: SortingDirection.Asc, fieldName: ‘Test’, ignoreCase: false, strategy: DefaultSortingStrategy.instance() } ];
More information about the group boo feature can be found in this topic in our Angular documentation.
HI @Gerogi , Thanks for the response . I have tried the same thing in my application still . I am not able to export the grouped rows . I have created a stackblitz sample.
https://stackblitz.com/edit/angular-ouju1g-9dnj5g?file=src%2Fapp%2Fgrid%2Fgrid-groupby-sample%2Fgrid-groupby-sample.component.html
After exporting . I am not able to see application and test column. this exactly we are binding the data. Please help me to resolve this.
Thank you for the provided sample.
I have been looking into your question and the reason the igx-grid component cannot be exported to an excel file in the given sample is the use of the formatter property of the igx-column component for the date type column to format and change the date. The reason is not in the grouping and in the group by feature itself, but when changing the dates for all cells in the given column with formatter property, the export cannot be performed because the date and format itself are completely modified.
What I could suggest as an approach is if you don't have date type columns just put the groupable property on all other columns and set it to true to implement and take advantage of the group by feature which will fully work with pinning and multi-column headers. On the other hand, if you have date type columns and you don't need any formatting you can remove the formatter property of the igx-column component and again before and after grouping the grid will export to an excel file as expected.
Finally, if you actually have a date type column and need some formatting for the dates in the cells of the column you can use the ng-template element with the igxCell directive so you can take the value of each cell and apply a pipe to format the cell value.
<igx-column field="OrderDate" header="Order Date" [groupable]="true"> <ng-template igxCell let-cell="cell" let-val> {{val | date:'dd/MM/yyyy'}} </ng-template> </igx-column>
I have also made an additional sample for your reference in which I have implemented together multi-column headers, pinning feature and grouping feature along with exporting to excel which works as expected as this described behavior can be found here.