Advanced User Interface Controls and Components
Any content added to the item template in TreeView component is displayed within the item space. You can also use this template to create and show custom toolbar that will appear on item right side. However if there is horizontal scrolling, the toolbar will appear on far right side beyond the visible area of the TreeView.
For this purpose a different template is required, which will show a toolbar for hover item or on item selection and will remain visible in the current view. In this article, you will learn how to do that for TreeView web component in Angular, React and Vue.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
As demo shows, when item is hovered a small toolbar consisting of two icons appear on item right side. Using the toolbar, you can edit or delete an item.
When edit icon is clicked, the item label is replaced by an input element when you can enter a new label. And when delete icon is clicked, the item is removed from the tree hierarchy.
In addition to the default template that is used to add custom content to each item, there are two additional templates where you can add content displayed only when item is hovered or selected. Difference between these templates is in their type:
The content in default template is displayed in item space, if larger than TreeView width, a horizontal scrollbar will appear. On other hand, the content from hover and select templates are displayed only on demand, and will appear with whole width of the current view
<iui-treeview [items]="items">
<ng-template let-item [iuiTemplate]="{ type: 'item' }">
<!-- Default Item Content -->
</ng-template>
<ng-template let-item [iuiTemplate]="{ type: 'item-hover' }">
<!-- Content when item is hovered -->
</ng-template>
<ng-template let-item [iuiTemplate]="{ type: 'item-select' }">
<!-- Content when item is selected -->
</ng-template>
</iui-treeview>
The hover template is useful when you need to process custom actions on demand that is when item is hovered. You can add any content within this template, which will appear over the default item content.
In this example, the hover template contains a toolbar with two icons, which acts like command buttons. With edit icon, you can edit the item label and with the trash icon, you can remove the item from the tree hierarchy.
@ViewChild('treeview', { static: false }) treeview: IntegralUITreeView;
. . .
// Selects the whole text in the text editor
selectContent(e: any){
if (e.target){
setTimeout(function(){
e.target.setSelectionRange(0, e.target.value.length);
}, 1);
}
}
showEditor(item: any){
this.treeview.selectedItem = item;
this.originalText = item.text;
this.isEditActive = true;
this.editItem = item;
this.editorFocused = true;
item.allowDrag = false;
}
closeEditor(){
if (this.editItem)
this.editItem.allowDrag = true;
this.editItem = null;
this.originalText = '';
this.editorFocused = false;
}
editorKeyDown(e: any){
if (this.editItem){
switch (e.keyCode){
case 13: // ENTER
this.closeEditor();
this.treeview.updateLayout();
break;
case 27: // ESCAPE
this.editItem.text = this.originalText;
this.closeEditor();
break;
}
}
}
editorLostFocus(){
if (this.editItem)
this.editItem.text = this.originalText;
this.closeEditor();
}
// Remove item from TreeView when toolbar delete button is clicked
deleteItem(item: any){
this.treeview.removeItem(item);
this.treeview.updateLayout();
}
<ng-template let-item [iuiTemplate]="{ type: 'item-hover' }">
<div class="toolbar">
<span class="item-button item-button-delete" (click)="deleteItem(item)"></span>
<span class="item-button item-button-edit" (click)="showEditor(item)"></span>
</div>
</ng-template>
.toolbar
{
display: inline-block;
right: 0;
top: 7px;
padding-left: 5px;
}
.item-button
{
background-image: url(resources/icons.png);
background-repeat: no-repeat;
display: inline-block;
overflow: hidden;
padding: 0;
margin: 10px 4px 0 4px;
width: 16px;
height: 16px;
float: right;
opacity: 0.5;
}
.item-button:hover
{
opacity: 1;
}
.item-button-edit
{
background-position: -128px -81px;
}
.item-button-delete
{
background-position: -80px -96px;
}
The contentVisibility property of the TreeView component, determines when then content from item templates is shown. This property accepts values from IntegralUIContentVisibility enumeration, which can have one of the following values:
By default, this contentVisibility property is set to Both, which means that content from hover and select templates will appear in both cases, when item is hovered or selected, correspondingly.
This property doesn't have effect on the default item template.
In addition, each item has a contentVisibility field, which you can use to set the content visibility on individual level. For example, you can a have a toolbar to appear on hover for all items except the root items. To solve this:
import { IntegralUIContentVisibility } from './integralui/components/integralui.core';
. . .
public treeContentVisibility: IntegralUIContentVisibility = IntegralUIContentVisibility.Hover;
ngAfterViewInit(){
// Filter the data set so that oly root items are affected
// Set the contentVisibility to None to all root items
this.items
.filter(item => !item.pid)
.map(item => item.contentVisibility = IntegralUIContentVisibility.None);
}
<iui-treeview [items]="items" [contentVisibility]="treeContentVisibility">
<!-- TreeView Content -->
</iui-treeview>
Similar to showing a toolbar on item hover, you can also add a content that will appear when item is selected. This toolbar may be the same as the one in hover template, or you can create entirely different content.
<ng-template let-item [iuiTemplate]="{ type: 'item-select' }">
<div class="toolbar">
<span class="item-button item-button-delete" (click)="deleteItem(item)"></span>
<span class="item-button item-button-edit" (click)="showEditor(item)"></span>
</div>
</ng-template>
You can change the toolbar based on which items are selected. But for the purpose of this article and keep it simple, the hover and select templates have the same content.
If multi-selection is enabled, the toolbar will appear for all selected items. In some cases, this may be too much, and you may not need a toolbar for all items. To solve this, you can handle the selectionChanged event and set the contentVisibility property to Hover or None, when there is more than one selected item:
onSelectionChanged(e: any){
let selList = this.treeview.getList('selected');
this.treeContentVisibility = selList.length > 1 ? IntegralUIContentVisibility.Hover : IntegralUIContentVisibility.Both;
}
<iui-treeview [items]="items" [contentVisibility]="treeContentVisibility" (selectionChanged)="onSelectionChanged($event)">
<!-- TreeView Content -->
</iui-treeview>
This article, presents how to show a toolbar when item is hovered or selected for TreeView as a web component. The sample code is available in plain JavaScript and can be used in Angular, React and Vue frameworks.
The default template determines the content displayed for each item in TreeView component. When you need to show an additional content, for example a toolbar, you can use different templates that will display the toolbar on demand, when item is hovered and/or selected.
In addition, using properties and events you can decide when the toolbar will appear, for all items or for each item separately.
The TreeView component is part of IntegralUI Web.