Advanced User Interface Controls and Components
Created: 10 April 2017
IntegralUI ListBox component comes with four selection options that allows you to select one or multiple items, using mouse and/or keyboard keys. This article provides details on each option available.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
From control panel in above demo, you can choose how to select items. The following options are available:
Related: How to Drag and Drop Selected Items in ListBox for Angular
The list on right shows the items are currently selected.
//
// app.module.ts
//
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { IntegralUIModule } from './integralui/integralui.module';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
FormsModule,
IntegralUIModule
],
declarations: [
AppComponent,
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
//
// app.component.ts
//
import { Component, ViewContainerRef, ViewChild, ViewEncapsulation } from '@angular/core';
import { IntegralUIListBox} from '../../integralui/components/integralui.listbox';
import { IntegralUISelectionMode } from '../../integralui/components/integralui.core';
@Component({
selector: 'iui-app',
templateUrl: 'app.template.html',
styleUrls: ['sample-styles.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
// Get a reference of the ListBox component on the left
@ViewChild('listbox') listbox: IntegralUIListBox;
// An array that holds all options in the comboo box
private comboItems: Array<any>;
// An array that holds a list of items in the ListBox on the right
private items: Array<any>;
// An array that holds a list of all selected items
private selItems: Array<any>;
// Current selection mode is set to single selection
private selMode: IntegralUISelectionMode = IntegralUISelectionMode.One;
constructor(){
// Options to choose from
this.comboItems = [
{ text: "None" },
{ text: "One" },
{ text: "Multi Simple" },
{ text: "Multi Extended" }
];
// Create a list of items
this.items = [
{ text: "Inception" },
{ text: "Gravity" },
{ text: "Django Unchained" },
{ text: "Toy Story 3" },
{ text: "The Wolf of Wall Street" },
{ text: "The Town" },
{ text: "Nightcrawler" },
{ text: "Locke" },
{ text: "Prometheus" },
{ text: "The Social Network" },
{ text: "The Conjuring" },
{ text: "Blue Jasmine" },
{ text: "Black Swan" },
{ text: "Prisoners" },
{ text: "The Avengers" },
{ text: "Snowpiercer" },
{ text: "The Dark Knight Rises" },
{ text: "American Hustle" },
{ text: "Dawn of the Planet of the Apes" },
{ text: "Frozen" },
{ text: "Edge of Tomorrow" },
{ text: "Interstellar" },
{ text: "Rush" },
{ text: "Shutter Island" },
{ text: "This Is the End" }
];
// At first there are no selected items
this.selItems = [];
}
onComboSelectionChanged(e: any){
// Whenever an option is selected, update the selection mode of the ListBox
switch (e.index){
case 0:
this.selMode = IntegralUISelectionMode.None;
break;
case 2:
this.selMode = IntegralUISelectionMode.MultiSimple;
break;
case 3:
this.selMode = IntegralUISelectionMode.MultiExtended;
break;
default:
this.selMode = IntegralUISelectionMode.One;
break;
}
}
onSelectionChanged(e: any){
// Get the list of currently selected items and display it in the ListBox on the right
this.selItems = this.listbox.getList('selected');
}
}
//
// app.template.html
//
<div style="float:left">
<div style="float:right">
<span style="display:inline-block;padding:10px 5px 5px 0;">Selection Mode: </span>
<iui-combobox [items]="comboItems" [maxDropDownItems]="4" [integralHeight]="true" [selectedIndex]="1" (selectedIndexChanged)="onComboSelectionChanged($event)">
<iui-item *ngFor="let item of comboItems" [text]="item.text"></iui-item>
</iui-combobox>
</div>
<iui-listbox #listbox [items]="items" [selectionMode]="selMode" (selectionChanged)="onSelectionChanged($event)">
<iui-listitem *ngFor="let item of items">
<div class="item-label">{{item.text}}</div>
</iui-listitem>
</iui-listbox>
</div>
<div style="float:left;margin-left:30px;">
<div style="padding:10px 0 5px 0;">Selected Items:</div>
<iui-listbox [items]="selItems">
<iui-listitem *ngFor="let item of selItems">
<div class="item-label">{{item.text}}</div>
</iui-listitem>
</iui-listbox>
</div>
/*
* sample-styles.css
*/
.iui-combobox
{
display: inline-block;
float: right;
width: 200px;
}
.iui-listbox
{
width: 400px;
height: 400px;
}
.item-label
{
padding: 5px;
}
By default, you can select only one item. Whenever a mouse button is clicked over some item in the ListBox, the item will become selected.
During selection, various events are fired in following order:
By handling these events in your code, you can alter the selection process. For example, we can handle the selectionChanged event and display all items that are currently selected:
onSelectionChanged(e: any){
// Get the list of currently selected items and display it in the ListBox on the right
this.selItems = this.listbox.getList('selected');
}
<iui-listbox #listbox [items]="items" [selectionMode]="selMode" (selectionChanged)="onSelectionChanged($event)">
<iui-listitem *ngFor="let item of items">
<div class="item-label">{{item.text}}</div>
</iui-listitem>
</iui-listbox>
</div>
When selectionMode property value is set to either Multi-Simple or Multi-Extended, you can select multiple items. The difference between these modes is that with Multi-Simple selection mode, you don't have to use a keyboard to select items. Selection is done by simply clicking on an item.
On the other hand, with Multi-Extended mode in order to select multiple items, you must press and hold either the CTRL or SHIFT key.
Related: How to Move Multiple Items with Drag and Drop
Using the CTRL key, you can change the selected state of an item to true or false, and select items in random order. The SHIFT key allows you to select all items from the first to the last one that is clicked.
In some cases, you may need to select multiple items from code. For this purpose is best to use the selectItems method. You need to create a list of items that you want to select, and then apply it, like this:
let list: Array<any> = [];
list.push(this.items[1]);
list.push(this.items[2]);
list.push(this.items[4]);
this.listbox.selectItems(list);
You can have single or multiple selected items in ListBox component for Angular 2. The selection is accompanied with events that you can handle in your code and add custom behavior. When required, you can also select multiple items manually from code.
The ListBox component is part of IntegralUI Web.