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

$scope.gridOptions.enableScrollbars = false;

with

$scope.gridOptions.enableHorizontalScrollbar = 0;
$scope.gridOptions.enableVerticalScrollbar = 0;

In the sources of ui-grid there are three Constants defined for the scrollbars:

scrollbars: {
  NEVER: 0,
  ALWAYS: 1,
  WHEN_NEEDED: 2
}

Facing the fact that ui-grid is still unstable and changed very often, i would feel more comfortable using those constants instead of the specific values. But how can i access them ?

Plunker: http://plnkr.co/edit/h0ewAZK616rKCH3T62te

Don Branson · Accepted Answer · 2016-03-31 13:26:41Z

52

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;

    ...
})

edited Mar 31, 2016 at 13:26

Don Branson

13.7k10 gold badges62 silver badges103 bronze badges

answered Nov 16, 2014 at 21:47

nabinca

2,0221 gold badge19 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

J-Dizzle Over a year ago

Where do you find all the options available for uiGridConstants?

J-Dizzle Over a year ago

I console.log'd it: is it just avg, count, max, min & sum? I feel like stddev should be in there

nabinca Over a year ago

The most reliable way to get the information you need concerning ui-grid is to read the source code and to ask the developers on git hub. :)

MrYellow Over a year ago

Problem is this doesn't disable bind-scroll-vertical and ui-grid continues to swallow some scroll events.

Alex Pan · Accepted Answer · 2015-11-12 17:12:32Z

15

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
    };
}

edited Nov 12, 2015 at 17:12

Alex Pan

4,7618 gold badges39 silver badges46 bronze badges

answered Nov 12, 2015 at 16:16

Laura Riera

5254 silver badges8 bronze badges

1 Comment

MrYellow Over a year ago

This hides the scrollbars but does not stop uiGrid from interfering with scroll events.

Gethin · Accepted Answer · 2016-03-07 15:36:54Z

12

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.

answered Mar 7, 2016 at 15:36

Gethin

3263 silver badges15 bronze badges

Collectives™ on Stack Overflow

Using ui-grid constants to disable scrollbars

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related