ui-grid custom directive height not getting updated when i change the data

Question

I have a UI-grid Custom Directive and I am changing the height of grid with a condition that if it has more than 10 rows I am fixing the height, this is the following code

scope.gridOptions.data = scope.data;
if (scope.data.length > 10) {
        scope.gridOptions.minRowsToShow = 10;
      } else {
        scope.gridOptions.minRowsToShow = scope.data.length;
      }
   scope.gridOptions.virtualizationThreshold =scope.gridOptions.minRowsToShow;

by default its working fine but when I change the data the height is not updating. This is my plunker

Plunker Example Sample

i do not see you are updating `minRowsToShow` nor `virtualizationThreshold ` in your plunker. The css is also missing. Please update your code to see whether it works as [here](https://stackoverflow.com/a/39419952/1486742) — LeOn - Han Li, Jul 13 '17 at 19:40
i have added `css` as you said but when i have morethan 10 records even though its showing only 10 records, i want to fix the hieght if i have morethan 10 records — Syed Rasheed, Jul 14 '17 at 04:59

score 2 · Accepted Answer · answered Jul 15 '17 at 13:03

1) Use a conditional statement that limits the maximum # rows to show to 10 in getTableHeight():

scope.getTableHeight = function() {

  // limit table height to a maximum of 10 rows
  var tableRows = (scope.data.length > 10) ? 10 : scope.data.length;

  var rowHeight = 30; // your row height
  var headerHeight = 30; // your header height
  var height = "";
  if (scope.gridOptions.enablePaginationControls) {
    height = "auto";
  } else {
    height = (tableRows * rowHeight + headerHeight) + "px";
  }

  return {
    height: height
  };
};

2) Remove the class you have that overrides the height:

/* .ui-grid, .ui-grid-viewport {
    height: auto !important;
} */

Demo: https://plnkr.co/edit/baleHFkA85jCRI2SDSqO?p=preview

Other points to note:

customgrid should not use a self-closing tag, rather: <customgrid></customgrid>
virtualizationThreshold should take a number rather than a boolean

Also be care with your boundaries, at a very quick glance you have the code `if (scope.enablePagination && newVal.length < 10)` followed by `else if scope.enablePagination && newVal.length > 10)`. This doesn't cover the case of `newVal.length = 10`. Don't know if that is important, just something I noticed — K Scandrett, Jul 15 '17 at 13:15

ui-grid custom directive height not getting updated when i change the data

1 Answers1

Linked