I am using Data grid and have a combination of numeric and string column in my object. When I am binding the numeric columns with data type as the number, it is also changing the alignment of the column header. I want the header as is and position of all the option like sort and filter icon should be consistent across the grid i.e. Header text on left and filter icon (Excel filter) on right side as it is aligned when we used data type as String. Need CSS
Hello Shobhana SuaraThank you for posting in our forum.
You can apply style to header row using "headerClasses".https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#headerclasses
<igx-grid #grid1 [data]="data" width="700px" height="300px" displayDensity="compact"> <igx-column field="Id" header="ID"></igx-column> <igx-column field="Name" header="Product Name" headerClasses="name-column-header"></igx-column> <igx-column field="Price" header="Price"></igx-column> <igx-column field="RegisteredDate" header="Registered Date"> <ng-template igxCell let-val> {{val | date:'yyyy/MM/dd'}} </ng-template> </igx-column> <igx-column field="IsActive" header="Is Active"></igx-column> </igx-grid>
::ng-deep { .name-column-header .igx-grid__th-title { color: red; text-decoration: underline; } }
Here is a sample application which uses the above codes.7888.igx-grid-column-styling.zip
Can u please reply.. it urgent.
Hello Shobhana Suara,Thanks for giving me the sample URL then I understood.
I added a "headerClasses" to target igx-column and some styles.
https://stackblitz.com/edit/datagrid-alignment-issue-bepjny
You can implement it using below.
::ng-deep { .reverseRow { flex-direction: row-reverse; .igx-grid__th-icons { flex-direction: row-reverse; } } }
please let me know if the problem persists. Thanks
Thank you Motoki for your help :) Could you let me know how can i left align the content of BeatsperMinute.
If you want to change align to body cell, you can use "cellClasses".
https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#cellclasses
I fixed our sample, please check it out.
stackblitz.com/.../datagrid-alignment-issue-bepjny
Thank you so much Motoki... Appreciate your help. I wish all this can be included in document with examples so that we can use it as a guide
Hi Shobhana Suara,In conclusion, you need to add a class to the header cell and body cell.
<igx-column field="BeatsPerMinute" header="BeatsPerMinute" headerClasses="reverseRow" dataType="number" [sortable]="true" width="120px" [hasSummary]="false" [summaries]="sumSummary" [editable]="editable" [resizable]="true" [cellClasses]="{'flexStart':true}"> </igx-column>
* using headerClasses and cellClasses
And add a style in your scss.
::ng-deep { .reverseRow { flex-direction: row-reverse; text-align: left; .igx-grid__th-icons { flex-direction: row-reverse; } } .flexStart { justify-content: start; } }
Here is a sample project.7563.datagrid-alignment-issue-bepjny.zip
Best regards,
Hi Team,
Me and shobhana are from same firm and same team, after angular and infragistics upgrade we are seeing issues with Igx grid, We have a gird with delete column header to delete the rows , it will be visible on click of edit button of the form but after the upgrade the delete column header displays as the first column, even though it is the last column , if we remove the *ngIf condition it is displaying correctly as the last column. what could be the issue here
Hi Vigneshwar Kundarapu,It will be helpful for us to resolve your issue if you could provide more detail like your using Angular version or sample application.
Anyway, I made the sample application including column having a row deleting function.codesandbox.io/.../busy-dawn-qesm7
Can this application reproduce your issue?Please compare the code between this sample and yours.
Sincerely,Motoki
Hello Motoki,we have upgraded to Angular version 9 and Infragistics version 9.This is sample : https://codesandbox.io/s/prod-voice-8s0olwhen you click the button, you can see the delete column is displaying in first column instead of last. Please provide solution for the same.
Thanks.
Hi Motoki,
Thanks for reaching out, i was able to replicate the issue in the sandbox. On the click of the button
I added a button
Hi Vigneshwar Kundarapu,
Please use a hidden accessor to change the hidden setting for the column.www.infragistics.com/.../igxcolumncomponent.html
This is a sample.https://codesandbox.io/s/busy-dawn-qesm7?file=/src/app/grid/grid-editing-events/grid-editing-events.component.html