Using ui-grid constants to disable scrollbars

Question

With the latest version of ui-grid (v3.0.0-rc.16) it is possible to turn the horizontal and vertical scrollbar off seperately. I got this working by exchanging

Answer 1

Got my answer on github:

All I needed to do was to pass uiGridConstants to my controller like this:

angular.module('myApp').controller('myCtrl',function($scope,uiGridConstants) {
    ...

    $scope.gridOptions.enableHorizontalScrollbar = uiGridConstants.scrollbars.NEVER;

    ...
})

Answer 2

A workaround for this (since WHEN_NEEDED is currently disabled) is to set enableHorizontalScrollbar: 0 on your gridOptions and then in your stylesheet have the following:

.ui-grid .ui-grid-render-container-body .ui-grid-viewport {
  overflow-x: auto !important;
}

Now the horizontal scroll bar only displays when needed.

Answer 3

With John Papa style:

ExampleController.$inject = ['$scope', 'uiGridConstants'];
function ExampleController($scope, uiGridConstants) {
    var vm = this;

    vm.gridOptions = {
        enableHorizontalScrollbar : uiGridConstants.scrollbars.NEVER,
        enableVerticalScrollbar   : uiGridConstants.scrollbars.NEVER
    };
}