CODEWITHSUNDEEP
angular6ag-grid
CompanyDroneFromSector7G
CompanyDroneFromSector7G

Reputation: 4527

How do I set AG-Grid's height to automatically match the data content height?

I'm trying to get ag-grid's height to match the content.

I have several sets of data which I'm trying to load into different grids, each with the appropriate height for the data.

There is an AutoHeight option but the Angular version doesn't seem to work (I'm assuming this is for a previous version).

Here is my alternative attempt, which doesn't work:

                <ng-container *ngFor="let reportItem of reportData">
                    <br />
                    <ag-grid-angular style="width: 100%; height: {{ 560 + (reportItem.data.length * 40) }}px;"
                                     class="ag-theme-material bold-headers"
                                     [rowData]="reportItem.data"
                                     [columnDefs]="columnDefs">
                    </ag-grid-angular>
                </ng-container>

Does anyone have a better suggestion?

Rather than just linking to the Auto-Grid Height method I described at the top - which I tried and failed with, could you please explain how I should implement it with my code above? (as I accept I may have missed something)

Thanks

Upvotes: 4

Views: 13626

Answers (2)

Mohammed Nosirat
Mohammed Nosirat

Reputation: 382

according to this link you can use domLayout='autoHeight' as a property to your grid.

it worked for me.

Upvotes: 5

Rudy
Rudy

Reputation: 2373

There is the setGridAutoHeight method available on the api object. You need to get a reference to that object from the gridReady event and then you can call it, passing true to it. You have to take care with it if your data has many rows because using this method all the rows will be rendered to the DOM, normally only the visible ones are rendered.

gridApi.setGridAutoHeight(true)

It's at the bottom of the page: https://www.ag-grid.com/javascript-grid-api/

Upvotes: 1

Related Questions