How to Enable horizontal scrollbar in ui-grid angularjs

15,940

If you want always display horizontal scrollbar, in your scrollbar options set enableHorizontalScrollbar to uiGridConstants.scrollbars.ALWAYS, if you want to display it only when you need it, set it to uiGridConstants.scrollbars.WHEN_NEEDED.

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

  .controller('MainCtrl', ['$scope', 'uiGridConstants', function($scope, uiGridConstants) {

    $scope.yourGridOptions = {
      enableHorizontalScrollbar: uiGridConstants.scrollbars.WHEN_NEEDED, // Here!
      enableVerticalScrollbar: uiGridConstants.scrollbars.WHEN_NEEDED,
      columnDefs: [{
        name: 'col1',
        width:150
      }, {
        name: 'col2',
        width:150
      }, {
        name: 'col3',
        width:150
      }, {
        name: 'col4',
        width:150
      }],
      data: [{
        "col1": "aa",
        "col2": "bb",
        "col3": "cc",
        "col4": "dd"
      }, {
        "col1": "aa",
        "col2": "bb",
        "col3": "cc",
        "col4": "dd"
      }, {
        "col1": "aa",
        "col2": "bb",
        "col3": "cc",
        "col4": "dd"
      }]
    };
  }]);

.grid {
  width: 200px;
  height: 250px;
}

<!doctype html>
<html ng-app="app">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-touch.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-animate.js"></script>
        <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
        <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
        <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
        <script src="http://ui-grid.info/release/ui-grid.js"></script>
        <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
        <link rel="stylesheet" href="main.css" type="text/css">
    </head>
    <body>

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


    </body>
</html>

15,940

Author by

Shubhankar Bapat

Updated on June 26, 2022

Comments

Shubhankar Bapat about 2 years

I am using angularjs ui-grid but i am not getting horizontal scrollbar on my grid and all the column headers are getting mixed as there is no scrollbar in the grid. How can i enable horizontal scrollbar?