LIDOR SYSTEMS

Advanced User Interface Controls and Components

Overview of IntegralUI TreeList for Angular 2

Created: 15 August 2016

Updated: 21 December 2016

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.

TreeList component is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps

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.

How to Use IntegralUI TreeList in Angular 2

In order to use the TreeList component in your app, you need to do the following:

  • Place the TreeList using the iui-treelist tag name
  • Set values for different properties available
  • Define the template that will be used to create tree items
  • Use the ngFor directive to cycle through each item
  • Connect the TreeList to your data source

//

// 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;

// 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.

Supported Properties

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:

  • controlStyle - specifies an object that holds names for custom CSS classes
  • dataFields - specifies an object that map the fields names from data source to the ones used by the TreeList
  • items - holds a reference to the list of items defined in your application component
  • selectedItem - an object that points to the currently selected item
  • title - specifies the name of the initial list

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.

Data Binding in TreeList

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.

Supported Events

Whenever an item is selected, or when list is changed, a corresponding event is fired. Here is a list of available events:

  • afterSelect - occurs after item is selected
  • beforeSelect - occurs before item is selected
  • itemClick - occurs when item is clicked
  • itemDblClick - occurs when item is double-clicked
  • selectionChanged - occurs when currently selected item has changed

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.

How to Customize the TreeList Appearance

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.

Conclusion

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.

Currently this component is in BETA. A more advanced features are in work like: context menus, tooltips, custom themes, etc, which will be available as part of the initial release.

The TreeList component will be part of IntegralUI Studio for Web. Here you can check out different features of existing components.

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.