0

I am trying to set height of the ui-grid to be the size of 3 rows. I went through the ui-grid documentation and it contains something like minRowsToShow but there is no equivalent property to maxRowsToShow or something similar.

I am trying to avoid setting a css fixed height manually on the grid.

var app = angular.module('app', ['ui.grid', 'ui.grid.edit']);

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
  $scope.gridOptions = {
    columnDefs: [
      { field: 'name' },
      { field: 'amount', name: 'Number', cellFilter: 'fractionFilter' },
      { field: 'amount', name: 'Currency', cellFilter: 'currencyFilter:this' }
    ]
  };
  
    $scope.gridOptions.data = [
      {
        "name": "Claire",
        "amount": 21.9015,
        "currency": "euro"
      },
      {
        "name": "Fitzpatrick",
        "amount": 41.6352,
        "currency": "pound"
      },
      {
        "name": "Ericka",
        "amount": 31.4228,
        "currency": "pound"
      },
      {
        "name": "Navarro",
        "amount": 2.1944,
        "currency": "dollar"
      },
      {
        "name": "Cherie",
        "amount": 31.9234,
        "currency": "dollar"
      },
      {
        "name": "Cobb",
        "amount": 45.5756,
        "currency": "pound"
      }
   ]; 
}])

.filter('fractionFilter', function () {
  return function (value) {
    return value.toFixed(0);
  };
})

.filter('currencyFilter', function () {
  var currencyMap = {
    'dollar': '$',
    'pound': '£',
    'euro': '€'
  };
  
  return function (value, scope) {
    return currencyMap[scope.row.entity.currency] + value.toFixed(2);
  };
})

;
<!doctype html>
<html ng-app="app">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
    <script src="//cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.6/ui-grid.min.js"></script>
    <link rel="stylesheet" href="//cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.6/ui-grid.min.css" type="text/css" />
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

<div ng-controller="MainCtrl">
  <div id="grid1" ui-grid="gridOptions" ui-grid-edit class="grid"></div>
</div>


    <script src="app.js"></script>
  </body>
</html>

My desired result is this. Is there a way of achieving this with existing ui-grid options/properties?

enter image description here

LazioTibijczyk
  • 1,701
  • 21
  • 48
  • Take a look here: https://stackoverflow.com/questions/27837335/angular-ui-grid-dynamically-calculate-height-of-the-grid – BartoszTermena Jan 02 '19 at 14:15
  • Tibijczyk here is working plunker: http://plnkr.co/edit/8jx6wdCF8BIAVkHRB2XA?p=preview – BartoszTermena Jan 02 '19 at 14:15
  • @BartoszTermena if you take a look at the Currency arrow, it's got a small margin on the right. If I've got more than 3 records in the table and 2 ui-grids on the page, the ui-grid's scrollbar above it has the margin too. – LazioTibijczyk Jan 02 '19 at 15:06

1 Answers1

0

You can use pagination and disable the pagination control:

$scope.gridOptions1 = {
     enableHorizontalScrollbar: 0,
     enableVerticalScrollbar: 0,
     paginationPageSizes: [3],
     paginationPageSize: 3,
     enablePaginationControls: false,
       columnDefs: [
        ...
       ]
     };

Visit http://ui-grid.info/docs/#!/tutorial/Tutorial:%20214%20Pagination

I edit the Plunker to show the result of the answer I am trying to give: http://plnkr.co/edit/T0URbr5KiFkEOzWTgE4i?p=preview

Ollo Kambou
  • 1
  • 1
  • 1