Dear Infragistics Team,
I am currently working with the igx-grid component and am exploring options for customizing the appearance of the grid's column headers.
I have a specific requirement to align the column headers vertically. Could you please advise if there is a built-in feature or a recommended approach to achieve vertical alignment for column headers within the igx-grid?
It should look somewhat like this:
Furthermore, I am also interested in knowing whether this vertical alignment can be retained when exporting the grid data to Excel. Ensuring that the alignment persists in the exported Excel file is crucial for maintaining a consistent user experience.
Any guidance, documentation, or insights you can provide on these matters would be greatly appreciated.
Thank you for your assistance and I'm looking forward to your response.
Best regards,
Michael
Hello,
I have been looking into your question and what I could say is that the approach in order to display the column group header vertically is similar i.e. via the igxHeader template:
<ng-template igxHeader let-column> <div class="vertical-header"> {{ column.header }} </div> </ng-template>
Here could be found a small sample where this approach is demonstrated. Please test it on your side and let me know if you need any further assistance.
Sincerely,Teodosia HristodorovaSoftware Developer
Thank you for your response and the information provided. I have encountered an issue when attempting to apply the vertical alignment to column headers within column groups. It appears that the solution does not work seamlessly with column groups.
Considering this, I kindly request your guidance on how to achieve the same vertical alignment for column headers within column groups. If there are specific modifications or additional steps required for this scenario, please provide detailed instructions or any relevant resources that could assist me in resolving this issue.
For reference, here is the grid im working on:
<igx-grid #grid> <igx-grid-toolbar> <igx-grid-toolbar-actions> <igx-grid-toolbar-exporter [exportExcel]="true" [exportCSV]="false"> </igx-grid-toolbar-exporter> </igx-grid-toolbar-actions> </igx-grid-toolbar> <igx-column-group header="Group 1"> <igx-column-group header="Group 1.1"> <igx-column-group header="Group 1.1.1"> <igx-column header="Header 1.1.1"></igx-column> <igx-column header="Header 1.1.2"></igx-column> <igx-column header="Header 1.1.3"></igx-column> </igx-column-group> </igx-column-group> <igx-column-group header="Group 2"> <igx-column-group header="Group 2.1"> <igx-column header="Header 2.1.1"></igx-column> <igx-column header="Header 2.1.2"></igx-column> <igx-column header="Header 2.1.3"></igx-column> <igx-column header="Header 2.1.4"></igx-column> </igx-column-group> </igx-column-group> </igx-column-group> </igx-grid>
I want the colums 1.1.1 - 1.1.3 and 2.1.1 - 2.1.4 to be vertical.
Thank you once again for your assistance, and I look forward to your response.
I have been looking into your question and what I could suggest in order to change the grid's headers orientation is to use the igxHeader template and apply a custom CSS class like follows:
<igx-column *ngFor="let c of columns" [field]="c.field" [editable]="true" [dataType]="c.dataType" > <ng-template igxHeader let-column> <div class="vertical-header"> {{ column.field }} </div> </ng-template> </igx-column>
.vertical-header { writing-mode: vertical-rl; transform: rotate(180deg); padding: 10px 0px 10px 0px; }
Regarding the second requirement, I could say that exporting custom styling could be achieved via the Excel Library by defining a worksheet and applying cellFormat to the header row:
worksheet.rows(0).cellFormat.rotation = 90; worksheet.rows(0).cellFormat.alignment = HorizontalCellAlignment.Center; worksheet.rows(0).height = 2000;
A small sample that demonstrates my suggestion can be found attached below.
Please test it on your side and let me know if I may be of any further assistance.
4682.exportVertHeader.zip