22

I can't find a good way to size the grid to fit all rows perfectly.

documentation only points to sizing by % or px.

Since I want it to size based on rows, I came up with the following function. Seem like im re-inventing the wheel, so maybe there is a better way? 

getHeight(type:EntityType) {
    var c = this.Apis[type] && this.Apis[type].api && this.Apis[type].api.rowModel // get api for current grid
        ? this.Apis[type].api.rowModel.rowsToDisplay.length
        : -1;
    return c > 0
        ? (40+(c*21))+'px' // not perfect but close formula for grid height
        : '86%';
}

there has to be a less messy way..

Sonic Soul
  • 23,855
  • 37
  • 130
  • 196
  • This seems to be the right approach, though I don't see why you are doing the various checks on whether the api exists or not... Do you need to change the grid height after filtering? or are you just using this one time for the initial grid creation? – Jarod Moser Jan 26 '17 at 22:02
  • because api gets initialized with the grid during load time. can't be certain getHeight gets called after it is initialized properly. – Sonic Soul Jan 27 '17 at 16:17
  • if you use the `onGridReady` event, then you wouldn't need to check if the api exists since that fires only after it does exist. – Jarod Moser Jan 27 '17 at 18:27
  • 1
    I am binding this property to a UI element using [style.height]="getHeight()". it's up to that UI element to call this property whenever it needs to. not sure what onGridReady has to do with it – Sonic Soul Jan 27 '17 at 20:50
  • Are you changing the grid's height anytime that a filter is applied? – Jarod Moser Jan 27 '17 at 20:53
  • i'm hoping that it will trigger a resize yes – Sonic Soul Jan 27 '17 at 20:56
  • can you have a look at once on my query - https://stackoverflow.com/questions/55691754/angular-ag-grid-attach-class-to-grouped-rows-cell-based-on-validation-of-other-c –  Apr 15 '19 at 15:59

6 Answers6

11

I came across this solution:

There are 2 answers to this problem.

1) If you are using anything below v10.1.0, then you can use the following CSS to achieve the problem:

.ag-scrolls {
    height: auto !important;
}

.ag-body {
    position: relative !important;
    top: auto !important;
    height: auto !important;
}

.ag-header { 
    position: relative !important;
}

.ag-floating-top {
    position: relative !important;
    top: auto !important;
}

.ag-floating-bottom {
    position: relative !important;
    top: auto !important;
}

.ag-bl-normal-east,
.ag-bl-normal,
.ag-bl-normal-center,
.ag-bl-normal-center-row,
.ag-bl-full-height,
.ag-bl-full-height-center,
.ag-pinned-left-cols-viewport,
.ag-pinned-right-cols-viewport,
.ag-body-viewport-wrapper,
.ag-body-viewport {
    height: auto !important;
}

2) Anything above v10.1.0, there is now a property called 'domLayout'.

Scott Solmer
  • 3,871
  • 6
  • 44
  • 72
Kennyb
  • 205
  • 2
  • 9
  • Thanks, this helped me with an issue i was having with `autoHeight` not acting the same in all browsers when using pinned columns – Edward Newsome Nov 04 '18 at 23:32
5

If the following is the markup

<ag-grid-angular
  #agGrid
  id="myGrid"
  class="ag-theme-balham"
  [columnDefs]="columnDefs"
  [rowData]="rowData"
  [domLayout]="domLayout"
  [animateRows]="true"
  (gridReady)="onGridReady($event)"
></ag-grid-angular>

Note that [domLayout]="domLayout"

set it as this.domLayout = "autoHeight"; and you're done..

Ref:

https://www.ag-grid.com/javascript-grid-width-and-height/

https://next.plnkr.co/edit/Jb1TD7gbA4w7yclU

Hope it helps.

NBaua
  • 583
  • 4
  • 16
  • 33
  • 1
    domLayout won't work for large number of rows. And I have over 4000 rows. Any idea on how to solve this? –  Feb 26 '20 at 06:21
  • Hi! Hey in the plunker there, if you look at the filters by clicking in the headers, you cna see the the overflow of filter pop-ups is hidden. You know how that have them be visible ? – Sébastien Richer Oct 07 '20 at 01:13
  • @user8750012 the grid docs suggest the large numbers of rows are not a grid limit but a browser limit: https://www.ag-grid.com/angular-data-grid/grid-size/ – MDave Nov 13 '21 at 02:11
  • 1
    Please don't default to domLayout = "autoHeight" because of convenience. I'd take a quick look at the cpu on Performance monitor in your devtools with autoHeight on and off. It's gonna drain your clients cellphone-batteries faster than you can say "autoHeight" – Yngve B-Nilsen May 19 '22 at 13:47
2
determineHeight() {
    setTimeout(() => {
      console.log(this.gridApi.getDisplayedRowCount());
      if (this.gridApi.getDisplayedRowCount() < 20) {
        this.gridApi.setDomLayout("autoHeight");
      }
      else {
        this.gridApi.setDomLayout("normal");
        document.getElementById('myGrid').style.height = "600px";
      }
    }, 500);
  }
luke neeley
  • 37
  • 2
2

You can now automate grid height by setting the domLayout='autoHeight' property, or by calling api.setDomLayout('autoHeight')

reference Grid Auto Height

Koji
  • 21
  • 2
1

Add the following code on onGridReady function for auto width and auto height

onGridReady = params => {
   // Following line to make the currently visible columns fit the screen  
   params.api.sizeColumnsToFit();

   // Following line dymanic set height to row on content
   params.api.resetRowHeights();
};

reference Auto Height Auto width

ranjit redekar
  • 919
  • 1
  • 12
  • 24
0

You can use ag-grid feature AutoHeight = true in the column Configuration. or if you want to calculate the height dynamically you should use getRowHeight() callback and create DOM elements like div and span, and add your text in it, then the div will give the OffsetHeight for it then you wont see any cropping of data/rows.

Hope this helps.

saicharan eurugu
  • 11
  • 2