Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 820
simple user Avatar asked Sep 03 '25 03:09

simple user


1 Answers

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.

like image 167
Ankit Mishra Avatar answered Sep 07 '25 21:09

Ankit Mishra