CODEWITHSUNDEEP
angularag-grid-angular
Ricardo Sanchez Santos
Ricardo Sanchez Santos

Reputation: 544

Ag-Grid show a third column that I don't have

I'm working with Angular, and I started using the Ag-Grid.

I need to display a grid with two columns, but when I opened it, it shows a third separator like if there were 3 columns.

enter image description here

Even if I display data in the rows, there are 3 columns, this is the code.

gridView (HTML)

<ag-grid-angular style="width: 100%; height: 100px;" class="ag-theme-balham" [rowData]="rowData"
[columnDefs]="columnDefs" [animateRows]="true" [enableSorting]="true" [enableFilter]="true"
(gridReady)="onGridReady($event)">
</ag-grid-angular>

gridView (Ts)

export class QSubReviewerGridComponent implements OnInit {
    gridApi;
    gridColumnApi;
    defaultColDef;
    columnDefs;
    rowData= [];

    constructor() { 
        this.columnDefs = [
            { headerName: "Review Type", sortable: true, filter: true, field: 'reviewerType' },
            { headerName: "Reviewer", sortable: true, filter: true, field: 'reviewer' },
        ]
        this.defaultColDef = { filter: true };
    }
    ngOnInit() {
    }
    onGridReady(params) {
         this.gridApi = params.api;
         this.gridColumnApi = params.columnApi;
    }

}

I don't know if the Ag-grid shows 3 columns by default, I've used it before with more columns and it never showed an extra one.

Upvotes: 0

Views: 1207

Answers (1)

AliF50
AliF50

Reputation: 18849

I am thinking you have to call sizeColumnsToFit.

Try:

onGridReady(params) {
         this.gridApi = params.api;
         this.gridApi.sizeColumnsToFit();
         this.gridColumnApi = params.columnApi;
 }

================== Edit ============================

To make it responsive, I would do the following:

<ag-grid-angular 
    style="width: 100%; height: 100px;" 
    class="ag-theme-balham" 
    [rowData]="rowData"
    [columnDefs]="columnDefs" 
    [animateRows]="true" 
    [enableSorting]="true" 
    [enableFilter]="true"
    (gridReady)="onGridReady($event)"
    (gridSizeChanged)="onGridSizeChanged($event)"
>
</ag-grid-angular>
....
onGridSizeChanged(params: GridSizeChangedEvent) {
  params.api.sizeColumnsToFit();
}

Now when you increase or decrease the size of the div holding the grid, it will be responsive.

Upvotes: 2

Related Questions