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 Vijay,
I have been looking into your question and by default with Excel Export enabled feature igx-grid component always exports the pinned columns. In your case with the multi-column headers in the grid, what I assume is that the multi-column headers themselves are not exported.
To enable the export of the multi-column headers, what you need to do is to handle the exportStarted event of the igx-grid-toolbar-exporter component, and in the given function you will set the ignoreMultiColumnHeaders option to false when exporting to export the multi-column headers as well.
<igx-grid #grid height="600px" [data]="data"> <igx-grid-toolbar> <igx-grid-toolbar-actions> <igx-grid-toolbar-exporter [exportExcel]="true" (exportStarted)="exportStarted($event)"></igx-grid-toolbar-exporter> </igx-grid-toolbar-actions> </igx-grid-toolbar> </igx-grid>
public exportStarted(args: IgxExporterEvent) { args.options.ignoreMultiColumnHeaders = false; }
However, I have created a small sample trying to reproduce the described behavior. I am using igx-grid component with Excel Export feature enabled. I also use multi column headers and Pinning feature enabled. On my side everything works as expected and I am able to pin a given multi-column header column and then export the grid to excel. The result is that all the columns along with the pinned column are exported and I can see all the values in the columns. I am testing the sample in your version of Ignite UI Angular ^14.2.x as well as in the latest version of Ignite UI Angular ^15.0.x and everything works as expected.
The described scenario could be observed here:
Here you will find my sample for your reference. Please test it on your side and let me know how it behaves. If this is not an accurate demonstration of what you are trying to achieve, please feel free to modify it and send it back to me along with steps to reproduce. Alternatively, if the behavior cannot be replicated, please feel free to provide your own sample.
Having a working sample on my side, which I can debug, is going to be very helpful in finding the root cause of this behavior.
If you require any further assistance on the matter, please let me know.
Regards,
Georgi Anastasov
Entry Level Software Developer
Infragistics
HI @Georgi Anastasov thanks for responding . MultiHeaders export is working fine. Exactly issue is we are using Grid Group by along with pinned columns. group by rows are not getting exported. Please find the stackblitz sample below.
https://stackblitz.com/edit/angular-ouju1g?file=src%2Fapp%2Fgrid%2Fgrid-groupby-sample%2Fgrid-groupby-sample.component.ts,src%2Fapp%2Fgrid%2Fgrid-groupby-sample%2Fgrid-groupby-sample.component.html
in the above example when i try to export . export button is getting disabled. Could you please provide fix for this.
Vijay.
Hello,
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>
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.
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.
Thank you for your cooperation.
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.
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.
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.