Advanced User Interface Controls and Components
Created: 15 August 2016
Updated: 24 March 2017
IntegralUI TreeList is a native Angular 2 component that displays one list of items from a tree hierarchy. By changing the currently selected item, the TreeList will display only the child items that belong to the selected item. This allows you to navigate among all items the tree hierarchy, one by one. In following sections of this article, you will find information about general features that are included in the TreeList component.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
In above demo we have different categories. By selecting a category, currently displayed list will slide to the left and a new list will show with sub-categories. The category name will appear in component header, from where you can move back to the previous selection.
In order to use the TreeList component in your app, you need to do the following:
//
// main.ts file
//
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
//
// app.module.ts file
//
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { IntegralUIModule } from 'integralui/integralui.module';
@NgModule({
imports: [ BrowserModule, IntegralUIModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
//
// app.component.ts file
//
import { Component } from '@angular/core';
@Component({
selector: 'iui-app',
templateUrl: 'app.template.html'
})
export class AppComponent {
// An Array object that holds all item objects shown in TreeList
// It is set as a list of any custom objects, you can use any custom fields and data bind them with TreeList using its properties
public items: Array<any>;
// Initial title of the TreeList
private treeTitle = "Categories";
// Initialize items in component constructor
constructor(){
this.items = [
{
id: 1,
text: "Books",
icon: "icons-medium library",
items: [
{ id: 11, pid: 1, text: "Art", icon: "icons-medium empty-doc" },
{
id: 12,
pid: 1,
text: "Business",
icon: "icons-medium people",
items: [
{ id: 121, pid: 12, text: "Economics", icon: "icons-medium empty" },
{
id: 122,
pid: 12,
text: "Investing",
icon: "icons-medium economics",
items: [
{ id: 1221, pid: 122, text: "Bonds" },
{ id: 1222, pid: 122, text: "Options" },
{ id: 1223, pid: 122, text: "Stocks" }
]
},
{ id: 123, pid: 12, text: "Management", icon: "icons-medium empty" },
{ id: 124, pid: 12, text: "Small Business", icon: "icons-medium empty" }
]
},
{ id: 13, pid: 1, text: "Health", icon: "icons-medium heart" },
{ id: 14, pid: 1, text: "Literature", icon: "icons-medium empty" },
{
id: 15,
pid: 1,
text: "Science",
icon: "icons-medium empty",
items: [
{ id: 151, pid: 15, text: "Astronomy" },
{ id: 152, pid: 15, text: "Mathematics" },
{ id: 153, pid: 15, text: "Evolution" },
{ id: 154, pid: 15, text: "Nature" }
]
}
]
},
{ id: 2, text: "Computers", icon: "icons-medium empty" },
{
id: 3,
text: "Electronics",
icon: "icons-medium empty",
items: [
{ id: 31, pid: 3, text: "Camera", icon: "icons-medium camera" },
{ id: 32, pid: 3, text: "Cell Phones", icon: "icons-medium empty" },
{ id: 33, pid: 3, text: "Video Game Consoles", icon: "icons-medium empty" }
]
},
{
id: 4,
text: "Music",
icon: "icons-medium album",
items: [
{ id: 41, pid: 4, text: "Blues" },
{ id: 42, pid: 4, text: "Classic Rock" },
{ id: 43, pid: 4, text: "Pop" },
{ id: 44, pid: 4, text: "Jazz" }
]
},
{
id: 5,
text: "Software",
icon: "icons-medium software",
items: [
{ id: 51, pid: 5, text: "Games" },
{ id: 52, pid: 5, text: "Operating Systems" },
{ id: 53, pid: 5, text: "Network & Servers" },
{ id: 54, pid: 5, text: "Security" }
]
},
{
id: 6,
text: "Sports",
icon: "icons-medium sports",
items: [
{ id: 61, pid: 6, text: "Baseball" },
{ id: 62, pid: 6, text: "Martial Arts" },
{ id: 63, pid: 6, text: "Running" },
{
id: 64,
pid: 6,
text: "Tennis",
items: [
{ id: 641, pid: 64, text: "Accessories" },
{ id: 642, pid: 64, text: "Balls" },
{ id: 643, pid: 64, text: "Racquets" }
]
}
]
},
{ id: 7, text: "Video Games", icon: "icons-medium empty" },
{ id: 8, text: "Watches", icon: "icons-medium clock" }
];
}
}
bootstrap(AppComponent);
//
// app.template.html file
//
<iui-treelist [title]="treeTitle" [items]="items">
<template let-item>
<span [ngClass]="item.icon"></span>
<span>{{item.text}}</span>
<span *ngIf="item.items" class="expand-icons-right next"></span>
</template>
</iui-treelist>
/*
treelist-overview.css file
*/
.iui-treelist
{
color: #323232 !important;
width: 250px !important;
height: 350px !important;
}
.expand-icons-right
{
background: url(../resources/expandbox-icons.png) no-repeat 0 0;
display: inline-block;
float: right;
overflow: hidden;
padding: 0;
margin: 3px 0 0 0;
width: 16px;
height: 16px;
vertical-align: middle;
}
.next
{
background-position: 0 0;
opacity: 0.25;
}
.iui-treelistitem:hover .next
{
opacity: 1;
}
.icons-medium
{
background: url(../resources/icons-x24.png) no-repeat 0 0;
display: inline-block;
overflow: hidden;
padding: 0;
margin: 0;
width: 24px;
height: 24px;
vertical-align: middle;
}
.empty-doc
{
background-position: -24px -48px;
}
.album
{
background-position: -144px -48px;
}
.camera
{
background-position: -168px -48px;
}
.library
{
background-position: 0 -72px;
}
.economics
{
background-position: -24px -72px;
}
.software
{
background-position: -48px -72px;
}
.clock
{
background-position: -72px -72px;
}
.sports
{
background-position: -96px -72px;
}
.people
{
background-position: -120px -72px;
}
.heart
{
background-position: -168px -72px;
}
Using a template allows you to create any custom HTML content. In our example, item contains an icon, text and a marker on right that appears only if the item has child items.
<template let-item>
<span [ngClass]="item.icon"></span>
<span>{{item.text}}</span>
<span *ngIf="item.items" class="expand-icons-right next"></span>
</template>
Note If you want to show some item with different content then other items, you can use the directive and set condition by which a different content will appear.
When you have a template ready, you need to link the data source with the TreeList using the items property. The data source can be any array in flat or tree format.
At start, only root items are displayed in the current view of the TreeList., because there is no item selected. When you select a specific item from the list, the list displayed in the TreeList will change accordingly showing only child items of the currently selected item.
All properties of the TreeList component can be set using a separate attribute that is linked to an object in your application scope or a specified value.
Here is a list of available properties:
By specifying the selectedItem property, you can set an item that will appear as selected during initialization. This property value will change whenever an item is selected either by user click or through code.
If you have a data source that uses different names for object fields, you can use dataFields property to match the names of fields in your data source with those used by the tree list. In this way, you can populate the TreeList using any kind of custom data source, local or remote.
You can also use this feature to load data on demand in the TreeList, from a remote data source.
Whenever an item is selected, or when list is changed, a corresponding event is fired. Here is a list of available events:
By handling these events in your code, you can add further actions that may alter the default behavior of the TreeList component. For example, by handling the beforeSelect event, you can cancel the selection and prevent the list from changing, or set conditions by which this change can occur.
IntegralUI TreeList component is fully customizable. There are different CSS classes for each component part. Although changing the attributes of built-in classes is possible, you can completely override them using the controlStyle property.
This property allows you to specify a set of different CSS classes for each component part and alter the appearance of the TreeList in whole. In this way, you can make it more suitable for your application requirements.
The IntegralUI TreeList component is best use as navigational sidebar. Instead of showing all items from a tree hierarchy, you can display one list on user request. This can help you in creation of a clear user interface.
The TreeList component is part of IntegralUI Web.