CODEWITHSUNDEEP
javascriptangularag-gridag-grid-angular
user1608841
user1608841

Reputation: 2475

Auto adjust row height of AG Grid in angular when other columns are hidden/shown dynamically

I am using AG-Grid version: 21.2.1 and I cannot upgrade my version due to some reasons.

I want to wrap cell content so that all content will be visible, which I achieve. I have buttons to hide/show columns in the application.

The problem is when I hide the column, then the height of the row is not getting adjusted according to other columns.

How shall we active that grid will auto adjust to content if another column got hidden / show dynamically ?

I have simulated the problem in this Stackblitz.

Click on the remove button, and observe the height of the row persist rather than adjusting according to other column's content

Sample code from stackblitz

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  gridApi;
  gridColumnApi;
  defaultColDef = {
    width: 170,
    sortable: true,
    editable: true,
    resizable: true,
    filter: true,
  };
  columnDefs = [
    {
      field: 'make',
      wrap: true,
      autoHeight: true,
      width: 300,
      minWidth: 300,
      hide: false,
      cellStyle: {
        wordBreak: 'break-all',
        whiteSpace: 'normal',
      },
    },
    { field: 'model', wrap: true, autoHeight: true },
    { field: 'price', wrap: true, autoHeight: true },
  ];

  rowData = [
    {
      make: 'Toyota ToyotaToyotaToyotaToyotaToyotaToyotaToyotaToyotaToyotaToyotaToyotaToyotaToyotaToyotaToyotaToyota',
      model:
        'CelicaCelicaCelicaCelicaCelicaCelicaCelicaCelicaCelicaCelicaCelicaCelicaCelicaCelicaCelica',
      price: 35000,
    },
    {
      make: 'FordFordFordFordFordFordFordFordFordFordFordFord',
      model: 'Mondeo',
      price: 32000,
    },
    { make: 'Porsche', model: 'Boxter', price: 72000 },
  ];
  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
  }
  showColumn() {
    this.gridColumnApi.setColumnsVisible(['make'], true);
  }
  hideColumn() {
    this.gridColumnApi.setColumnsVisible(['make'], false);
  }
}

Upvotes: 2

Views: 1601

Answers (1)

Krenom
Krenom

Reputation: 2108

Nice and simple; on your show/hide, add this.gridApi.resetRowHeights();.

Edit: Add to this answer per acceptance from my comment.

AG-Grid isn't always very good when you're trying to tell it to do thing after thing after thing after thing. It doesn't seem to store up/batch commands to process, so it sometimes just... ignores you.

One thing I've done - which is very painful to do but has made it do everything I need it to - is to wrap various things in a simple timeout.

Gives AG time to do whatever it was doing and then move on to what I wanted it to do after.

this.gridApi.doSomething();
setTimeout(() => { this.gridApi.resetRowHeights(); }, 500)

It's a little slow sometimes, bless it, give it some breathing room.

Upvotes: 1

Related Questions