TreeViewExample.html

<div *ngIf="model">
    <wm-window [model]="model" id="TreeView" class="TreeViewDocumentation_TreeView">
        <ng-template let-model>
            <div class="TreeView">
                <wm-treeview #treeView1 id="treeView1" [model]="model.treeView1" class="treeView1" tabindex="1"
                (NodeMouseClick)="nodeMouseClick($event)"
                (DblClick)="dblClick()"
                (MouseDown)="mouseDown()"
                (AfterExpand)="afterExpand()"
                (AfterCollapse)="afterCollapse()"
                (AfterCheck)="afterCheck($event)"
                (NodeMouseDoubleClick)="nodeMouseDoubleClick($event)"
                (Click)="click()"
                ></wm-treeview>
                <wm-label #label1 id="label1" [model]="model.label1" class="label1" tabindex="41">Configuration</wm-label>
                <wm-label #label2 id="label2" [model]="model.label2" class="label2" tabindex="42">Appearance</wm-label>
                <wm-button #button3 id="button3" [model]="model.button3" class="button3" tabindex="45"></wm-button>
                <wm-button #button4 id="button4" [model]="model.button4" class="button4" tabindex="46"></wm-button>
                <wm-textbox #textBox1 id="textBox1" [model]="model.textBox1" class="textBox1" tabindex="47"></wm-textbox>
                <wm-button #button5 id="button5" [model]="model.button5" class="button5" tabindex="48" (Click)="button5_Click()"></wm-button>
                <wm-textbox #textBox2 id="textBox2" [model]="model.textBox2" class="textBox2" tabindex="49"></wm-textbox>
                <wm-button #button6 id="button6" [model]="model.button6" class="button6" tabindex="50" (Click)="button6_Click()"></wm-button>
                <wm-button #button7 id="button7" [model]="model.button7" class="button7" tabindex="51" (Click)="button7_Click()"></wm-button>
                <wm-button #button8 id="button8" [model]="model.button8" class="button8" tabindex="52" (Click)="button8_Click()"></wm-button>
                <wm-button #button10 id="button10" [model]="model.button10" class="button10" tabindex="55" (Click)="button10_Click()"></wm-button>
                <wm-label #label3 id="label3" [model]="model.label3" class="label3" tabindex="56">Selected Node:</wm-label>
                <wm-button #button11 id="button11" [model]="model.button11" class="button11" tabindex="57" (Click)="button11_Click()"></wm-button>
                <wm-textbox #textBox4 id="textBox4" [model]="model.textBox4" class="textBox4" tabindex="58"></wm-textbox>
                <wm-textbox #textBox5 id="textBox5" [model]="model.textBox5" class="textBox5" tabindex="59"></wm-textbox>
            </div>
        </ng-template>
    </wm-window>
</div>

TreeViewExample.css

@import "../../../../assets/style/live-demos.css";

.TreeViewDocumentation_TreeView {
    left: -1px;
    top: -1px;
}
.TreeViewDocumentation_TreeView .TreeView {
    width: 1055px;
    height: 383px;
    overflow: hidden;
}
.TreeViewDocumentation_TreeView .treeView1 {
    left: 41px;
    top: 9px;
    width: 367px;
    height: 314px;
    position: absolute;
}
.TreeViewDocumentation_TreeView .label1 {
    width: auto;
    font-size: 14.25pt;
    left: 877px;
    top: 9px;
    height: auto;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
}
.TreeViewDocumentation_TreeView .label2 {
    width: auto;
    font-size: 12pt;
    left: 893px;
    top: 67px;
    height: auto;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
}
.TreeViewDocumentation_TreeView .label3 {
    width: auto;
    font-size: 14.25pt;
    left: 41px;
    top: 341px;
    height: auto;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
}
.TreeViewDocumentation_TreeView .button3 {
    left: 864px;
    top: 109px;
    width: 75px;
    height: 23px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
    border: 1px solid var(--primary-color-demos);
}
.TreeViewDocumentation_TreeView .button4 {
    left: 945px;
    top: 109px;
    width: 75px;
    height: 23px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
    border: 1px solid var(--primary-color-demos);
}
.TreeViewDocumentation_TreeView .button5 {
    left: 657px;
    top: 35px;
    width: 121px;
    height: 23px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
    border: 1px solid var(--primary-color-demos);
}
.TreeViewDocumentation_TreeView .button6 {
    left: 657px;
    top: 64px;
    width: 121px;
    height: 23px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
    border: 1px solid var(--primary-color-demos);
}
.TreeViewDocumentation_TreeView .button7 {
    left: 657px;
    top: 115px;
    width: 121px;
    height: 23px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
    border: 1px solid var(--primary-color-demos);
}
.TreeViewDocumentation_TreeView .button8 {
    left: 657px;
    top: 144px;
    width: 121px;
    height: 23px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
    border: 1px solid var(--primary-color-demos);
}
.TreeViewDocumentation_TreeView .button10 {
    left: 864px;
    top: 138px;
    width: 75px;
    height: 38px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
    background-color: var(--primary-color-demos);
    color: white;
    border: 1px solid var(--primary-color-demos);
}

.TreeViewDocumentation_TreeView .button11 {
    left: 945px;
    top: 138px;
    width: 75px;
    height: 38px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
    border: 1px solid var(--primary-color-demos);
}
.TreeViewDocumentation_TreeView .textBox1 {
    left: 451px;
    top: 35px;
    width: 177px;
    height: 23px;
    position: absolute;
    border-color: black;
}
.TreeViewDocumentation_TreeView .textBox2 {
    left: 451px;
    top: 63px;
    width: 177px;
    height: 23px;
    position: absolute;
    border-color: black;
}
.TreeViewDocumentation_TreeView .textBox4{
    left: 442px;
    top: 172px;
    max-width: 200px;
    max-height: 150px;
    height: 150px;
    min-width: 200px;
    min-height: 25px;
    position: absolute;
    border-color: black;
}
.TreeViewDocumentation_TreeView .textBox5{
    left: 649px;
    top: 172px;
    max-width: 200px;
    max-height: 150px;
    height: 150px;
    min-width: 200px;
    min-height: 25px;
    position: absolute;
    border-color: black;
}