Show Scrollbars on Mouse Over in Angular Tree Grid

Created: 19 February 2018

In general, when there are more rows than current view of the Angular TreeGrid component can show, a vertical scroll bar will appear. In similar way for columns, if their width exceeds the grid width, a horizontal scrollbar will appear. In some cases, you may need to show the scrollbars on demand, like for example when mouse cursor hovers over the grid space. This may improve the visual appearance of the grid in whole.

In above sample shows, when you move the mouse cursor over grid space, the horizontal and vertical scrollbar will appear. By leaving the grid space, the scrollbars will disappear.

How to Show Scrollbars in Angular Grid on Mouse Over

By default, scrollbars are set to appear automatically when required. To modify this behavior you can use the showScroll property, which determines the scrollbar visibility. This property accepts an object with following fields:

• horizontal - determines whether the horizontal scrollbar is visible or hidden
• vertical - determines whether the vertical scrollbar is visible or hidden

To create a scenario where showing and hiding of the scrollbars depends on whether the mouse cursor is over grid space or not, you can use the mousenter and mouseleave events. In these event handlers you can add code that will change the field values of the showScroll property, like this:

• Angular
• HTML5
• CSS3

public scrollVisibility: any = { horizontal: false, vertical: false }

onGridMouseEnter(e: any){
    this.scrollVisibility = { 
        horizontal: true,
        vertical: true
    }
}

onGridMouseLeave(e: any){
    this.scrollVisibility = { 
        horizontal: false,
        vertical: false
    }
}                            

<iui-treegrid [columns]="columns" [rows]="rows" [showScroll]="scrollVisibility" (mouseenter)="onGridMouseEnter($event)" (mouseleave)="onGridMouseLeave($event)" [controlStyle]="gridStyle" [showFooter]="false" #treegrid>
    <ng-template let-column [iuiTemplate]="{ type: 'header' }">
        {{column.headerText}}
    </ng-template>
    <ng-template let-cell [iuiTemplate]="{ type: 'cell' }">
        {{cell.text}}
    </ng-template>
</iui-treegrid>
                            

.treegrid-ssmh-normal
{
    width: 900px;
    height: 400px;
}
                            

As a result, the scrollbars will become visible only when mouse cursor is present over the grid space.

Conclusion

Changing the visibility of horizontal, vertical or both scrollbars in IntegralUI TreeGrid for Angular is simple. There is property that determines the scrollbar visibility on individual level. By modifying the values of this property by some condition in your code, you can alter the way the scrollbars will appear.

The TreeGrid component is part of IntegralUI Web.