@lidorsystems/integralui-web
Version:
IntegralUI Web - Advanced UI Components for Angular
210 lines (184 loc) • 9.38 kB
text/typescript
/*
Copyright © 2016-2019 Lidor Systems. All rights reserved.
This file is part of the "IntegralUI Web" Library.
The contents of this file are subject to the IntegralUI Web License, and may not be used except in compliance with the License.
A copy of the License should have been installed in the product's root installation directory or it can be found at
http://www.lidorsystems.com/products/web/studio/license-agreement.aspx.
This SOFTWARE is provided "AS IS", WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the specific language
governing rights and limitations under the License. Any infringement will be prosecuted under applicable laws.
*/
import { Component, ViewContainerRef, ViewChild, ViewEncapsulation } from '@angular/core';
import { IntegralUITreeView } from '../../integralui/components/integralui.treeview';
import { IntegralUISelectionMode } from '../../integralui/components/integralui.core';
import { IntegralUIListBox } from '../../integralui/components/integralui.listbox';
export class TreeViewMultiSelectSample {
applicationRef: ViewContainerRef;
treeview: IntegralUITreeView;
listbox: IntegralUIListBox;
// An array that holds all options in the comboo box
public comboItems: Array<any>;
// An array that holds a flat list of tree hierarchy
private flatData: Array<any>;
// An object that holds all items in the TreeView
public treeItems: Array<any>;
// An array that holds a list of all selected items
public selItems: Array<any>;
// Current selection mode is set to single selection
public selMode: IntegralUISelectionMode = IntegralUISelectionMode.One;
public comboStyle: any = {
general: {
normal: 'trw-cmb-mst'
}
}
public treeStyle: any = {
general: {
normal: 'trw-mst-normal'
}
}
public listStyle: any = {
general: {
normal: 'trw-mst-list'
}
}
constructor(){
// Options to choose from
this.comboItems = [
{ text: "None" },
{ text: "One" },
{ text: "Multi Simple" },
{ text: "Multi Extended" }
];
// At first TreeView doesn't have any data
// We will use loadData method to load a flat list into the TreeView after the view is initialized
this.treeItems = [];
// Create a tree hierarchy
this.flatData = [
{ id: 1, text: "Dairy", expanded: false },
{ id: 11, pid: 1, text: "Milk" },
{ id: 12, pid: 1, text: "Butter" },
{ id: 13, pid: 1, text: "Cheese", checked: true },
{ id: 14, pid: 1, text: "Yogurt" },
{ id: 2, text: "Fruits", checked: true },
{ id: 21, pid: 2, text: "Berries", expanded: false},
{ id: 211, pid: 21, text: "BlackBerries" },
{ id: 212, pid: 21, text: "CranBerries", checked: true },
{ id: 213, pid: 21, text: "StrawBerries" },
{ id: 22, pid: 2, text: "Pits", checked: true },
{ id: 23, pid: 2, text: "Core" },
{ id: 24, pid: 2, text: "Citrus Fruits" },
{ id: 241, pid: 24, text: "Oranges" },
{ id: 242, pid: 24, text: "Lemons", checked: true },
{ id: 25, pid: 2, text: "Melons" },
{ id: 26, pid: 2, text: "Tropical Fruits", expanded: false },
{ id: 261, pid: 26, text: "Avocados", checked: true },
{ id: 262, pid: 26, text: "Bananas", checked: true },
{ id: 263, pid: 26, text: "Dates" },
{ id: 3, text: "Grains" },
{ id: 4, text: "Meat", checked: true },
{ id: 41, pid: 4, text: "Beef" },
{ id: 42, pid: 4, text: "Lamb", expanded: false },
{ id: 421, pid: 42, text: "Lamb Breast" },
{ id: 422, pid: 42, text: "Lamb Leg", checked: true },
{ id: 423, pid: 42, text: "Lamb Ribs" },
{ id: 43, pid: 4, text: "Pork", checked: true },
{ id: 5, text: "Sweets" },
{ id: 6, text: "Vegetables", checked: true },
{ id: 7, text: "Water" }
];
// At first there are no selected items
this.selItems = [];
}
ngAfterViewInit(){
this.treeview.loadData(this.flatData);
}
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 TreeView on the right
let list: Array<any> = this.treeview.getList('selected');
this.selItems.length = 0;
for (let i = 0; i < list.length; i++)
this.selItems.push({ text: list[i].text });
this.listbox.updateLayout();
}
}