Issue
rowData: any = [];rowModelType = ‘serverSide’;
defaultColDef: any = { width: 50, sortable: true, resizable: true, };
columnDefs: any = [];rowSelection = ‘single’; public getRowHeight: any;
private paramRefreshAgGrid: any; private gridColumnApi: any;
private gridApi: any;
constructor() {
this.gridOption()
} gridOption() {
this.columnDefs = [
{ headerName: ‘نوع ارز’,field: ‘currencyCode’,width: 200,
},{ headerName: ‘خرید’,field: ‘buyEts’, width: 200, },
{ headerName: ‘انتخاب’, field: ‘sellEts2’, width: 200, },
{ headerName: ‘خرید’, field: ‘buyEts3’, width: 200, },
{ headerName: ‘انتخاب’, field: ‘sellEts’,width: 200, },
{ headerName: ‘خرید اضافه’, field: ‘buyExternalCheque’, width: 200 }
,{ headerName: ‘مبلغ’, field: ‘buyMoney’, width: 200,}, ]; }
onGridReady(params: any) {
const $this = this;
if (params) {
this.gridApi = params.api;this.gridColumnApi = params.columnApi;
this.paramRefreshAgGrid = params; }
const datasource = {
getRows(params: any) {
const data: any = [
{currencyCode: ‘Ford2’, buyEts: ‘Mondeo’, sellEts: 32000, sellEts2: 32000 , sellEts3: 32000 , buyExternalCheque: 500 ,
buyMoney: 100000},
]
params.successCallback(data, data.total);
$this.gridApi.sizeColumnsToFit();
}
};
if (params) {
params.api.setServerSideDatasource(datasource);
}
}<ag-grid-angular style="width: 100%;" [ngStyle]="{'height': '50vh' }" id="logGrid" class="ag-theme-balham" [columnDefs]="columnDefs" [defaultColDef]="defaultColDef" [enableRtl]="true" [rowModelType]="rowModelType" [animateRows]="false" [rowSelection]="rowSelection" [debug]="true" [rowData]="rowData" [getRowHeight]="getRowHeight" (gridReady)="onGridReady($event)" [paginationPageSize]="100" [suppressDragLeaveHidesColumns]="true" </ag-grid-angular>
I use the "ag-grid-angular": "20.2.0", in Angular 11 when I scroll the header The header cells are not aligned with the body cells.
What solution do you have to fix this error?
thanks !!
Solution
Version 20.2.0
of ag-grid-angular is 2 years old. Try installing the latest version of ag-grid-community
and ag-grid-angular
– I would also delete node_modules folder afterwards and do a clean npm install
This may solve the problem (or at least narrow it down)
Note You should highlight in the question that the issue is only occurring in Chrome