LIDOR SYSTEMS

Advanced User Interface Controls and Components

Expand Items on Mouse Hover or Text Click in TreeView for AngularJS

Created: 15 August 2014

By default each item in TreeView directive expands only by click on its expand box or if item text is double-clicked. There may be cases when we may need to expand the item by simply hovering over its space. In following section we will demonstrate how this can be done.

TreeView directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps

Expand on Hover

TreeView directive has an event called itemHover which is fired only when mouse cursor hovers over item space for a time longer than 500ms. If the mouse cursors quickly moves across the multiple items, this event will not be fired.

Related: How to Animate Visibility of Expand Boxes in AngularJS TreeView

This event by default doesn't do anything. We need to handle it and add our code specifying some action. There are two ways to handle the itemHover event:

  • by using the item-hover attribute
  • by using events attribute

In our example we will use the first case.

<iui-treeview class="directive" items="data" item-hover="onItemHover(e)"></iui-treeview>

As can be seen from above HTML5 fragment, the item-hover attribute holds a value to a function in our application scope.

var hoverItem = null;

var expandTimer = null;

 

// Expands the item when mouse cursor hovers over its space

$scope.onItemHover = function(e){

if (hoverItem != e.item){

// Cancel previous expand, because hover item has changed within 500ms time span

if (expandTimer)

$timeout.cancel(expandTimer);

 

// Create a 500ms timer that will expand the hovered item on end

expandTimer = $timeout(function(){

$treeService.expand($scope.treeName, e.item);

}, 500);

 

hoverItem = e.item;

}

}

The event carries the item object over which mouse cursor currently is positioned. By simply changing the expanded property of this item to true, we can expanded it.

Related: How to Use Expand/Collapse Methods

Expand on Text Click

We have already mentioned that if item is double-clicked it will expand, by default. But if item is only clicked it will not expand. We can also modify this, just like in above example, by simply handling the itemClick event, like this:

// Expands the item when its text is clicked

$scope.onItemClick = function(e){

if (e.item){

e.item.expanded = !e.item.expanded;

 

// Execute the item expansion

$scope.$apply();

}

}

<integralui-treeview class="directive" items="data" item-click="onItemClick(e)"></integralui-treeview>

The above code will execute whenever an item text is clicked, and the item will expand/collapse during this process. The $apply method needs to be called in this case because angular must know that the TreeView directive content is changed and thus update its layout. Otherwise, it may be small delay in updating.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.