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?
-
ui-grid.info/docs/#/tutorial/191_horizontal_scrollingDaniel– Daniel2015-12-15 10:25:28 +00:00Commented Dec 15, 2015 at 10:25
-
Refer the following link In Stack OverFlowIvan– Ivan2016-12-02 04:35:33 +00:00Commented Dec 2, 2016 at 4:35
Add a comment
|
2 Answers
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>
1 Comment
Suresh Negi
WHEN_NEEDED is not available in ui-grid - v3.0.7
Set enableHorizontalScrollbar: 0
for more information please go through below link.
