CODEWITHSUNDEEP
angularag-gridrow-height
simple user
simple user

Reputation: 383

Auto Row Height property of agGrid is not working

I am using Angular Grid in my project. I want to increase the row height automatically when cell content increased. I checked autoHeight property to set as auto but it is not working in my case.

In my case OldRequestNumber(s) can contain multiple data which span across multiple lines. On applying below it is showing only the first in the List event there are more in the List

HTML Page

<ag-grid-angular style="width: 100%; height: 200px"
                     class="ag-theme-balham"
                     [pagination]="true"
                     [gridOptions]="genderGridOptions"
                     [rowData]="genderRowData"                     
                     [columnDefs]="genderColDef"
                     (gridReady)="onGridReady($event)">
    </ag-grid-angular>

Component Page(*.ts)

export class GenderComponent implements OnInit {
    genderRowData: []; 
    genderColDef = [
        {
            headerName: 'Gender Name', field: 'Name',            
            autoHeight: true,                                      
        },
        {
            headerName: 'Request Number', field: 'RequestNumber',          
            autoHeight: true,                   
        },
        {
            headerName: 'OldRequestNumber(s)',
            cellRendererFramework: OldRequestRendererComponent,
            autoHeight: true,
        },        
    ];

    constructor(private genderCommonService: CommonFunctionService, private genderCellValueService: CellValueChangedService) {
    }

    ngOnInit() {
        this.genderCommonService.getEntityData('getallgenders')
            .subscribe((rowData) => this.genderRowData = rowData,
                (error) => { alert(error) }
            );
    }

    onGridReady(params: any) {
        params.api.sizeColumnsToFit();
        params.api.resetRowHeights();
    } 
}

Cell Renderer HTML

<div *ngFor="let req of params.data.OldRequestNumber">     
    {{req.RequestNumber}}
</div>

Cell Renderer Component

export class OldRequestRendererComponent {
    private params: any;

    agInit(params: any): void {
        this.params = params;        
    }

}

How to acheive this?

Upvotes: 3

Views: 17726

Answers (2)

Ankit Mishra
Ankit Mishra

Reputation: 189

It will work like this. Try it like below

{ headerName: 'Date', field: 'date', width: 175, cellStyle: { "white-space": "normal" }, autoHeight: true },

Include cellStyle: { "white-space": "normal" } then only it will work.

Upvotes: 4

simple user
simple user

Reputation: 383

I have made the following changes to achieve the functionality:-

HTML Page

<ag-grid-angular style="width: 100%; height: 200px"
                     class="ag-theme-balham"
                     [pagination]="true"
                     [gridOptions]="genderGridOptions"
                     [rowData]="genderRowData"                     
                     [columnDefs]="genderColDef"
                     [getRowHeight]="getRowHeight"     //Added this line
                     (gridReady)="onGridReady($event)">
    </ag-grid-angular>

Component Page(*.ts)

Modified ngOnInit() and constructor()

ngOnInit()
    {        
        this.genderCommonService.getEntityData('getallgenders')
            .subscribe((rowData) => {
                rowData.forEach(function (dataItem: any, index) {                                  
                    dataItem.rowHeight = 25 * dataItem.OldRequestNumber.length;                    
                });
                this.genderRowData = rowData
            },
                (error) => { alert(error) }
            );  

    } 

constructor(private genderCommonService: CommonFunctionService, private genderCellValueService: CellValueChangedService) {

          this.getRowHeight = function (params : any) {
                 return params.data.rowHeight;
          };


}

Hope it helps.

Upvotes: 0

Related Questions