Advanced User Interface Controls and Components
Created: 27 June 2014
By default scrollbar in TreeView directive is hidden and appears automatically when current view cannot display the tree structure in whole. At start the position of scrollbars, vertical and horizonatl, are set a default 0 position. However, we can change that by using the built-in methods in TreeView directive. In following sections we will show you how to use the setScrollPos method and how to handle the scrollPosChanged event.
There are cases where we want to set the position of scroll bar manually from code. This can be done by using the setScrollPos method, for example:
angular
.module("appModule", ["integralui"])
.controller("appCtrl", ["$scope", "IntegralUITreeViewService", function($scope, $treeService){
$scope.data = [];
$scope.treeName = "treeSample";
var scrollPos = {
x: 20,
y: 100
}
$treeService.setScrollPos($scope.treeName, scrollPos);
}]);
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/integralui.treeview.css" />
<link rel="stylesheet" href="css/themes/theme-blue.css" />
<script type="text/javascript" src="external/angular.min.js"></script>
<script type="text/javascript" src="js/angular.integralui.treeview.min.js"></script>
</head>
<body>
<div ng-app="appModule" ng-controller="appCtrl">
<integralui-treeview name="{{treeName}}" items="data"></integralui-treeview>
</div>
</body>
</html>
In above code the x variable holds the position of horizontal scrolbar, whle the y variable holds the position of vertical variable. The values are in pixels and in this case the position of vertical scrollbar will be set to 100 pixels down from the top of the tree view.
In some cases we may need to retrieve the current position of scroll bar to process some action. For example when current view is scrolled and reach 200 pixels we want to show a message stating some conditions met. We can display this message either to the console window or show some popup alert window. In order to do this we need to handle the scrollPosChanged event where we will retrieve the current position of scroll bar from the event argument and display a message if the right condition is met.
$scope.onScrollPosChanged = function(e){
console.log("Current scroll position is: { x: " + e.scrollPos.x + ", y: " + e.scrollPos.y + " }");
}
$scope.treeEvents = {
scrollPosChanged: function(e){
return $scope.onScrollPosChanged(e);
}
}
<iui-treeview items="data" events="treeEvents"></iui-treeview>
You can use this event to handle different kind of scenarios related to scrolling in TreeView.
In order to check whether a particular scroll bar is visible or not we are goind to use the built-in isScrollBarVisible method. This method has an argument which determine the type of scrollbar: horizontal, vertical or both. If this argument is ommited, it is presumed that we want to check visibility of both scrollbars.
$scope.checkScroll = function(){
var scrollVisible = $treeService.isScrollBarVisible($scope.treeName, 'vertical');
if (scrollVisible)
alert("Vertical ScrollBar is visible");
else
alert("Vertical ScrollBar is not visible");
}