Skip to content

Commit 3adab3d

Browse files
Marina-L-StoyanovaMarina-L-Stoyanova
authored
docs(samples): Styling the samples for the Angular Hierarchical DropDown (#3429)
1 parent cf226bc commit 3adab3d

6 files changed

Lines changed: 84 additions & 48 deletions

‎src/app/data-entries/dropdown/dropdown-tree-grid-hierarchical-selection/dropdown-tree-grid-hierarchical-selection.component.html‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,17 @@
1-
<div class="container">
2-
<div class="chip-container">
3-
<igx-chips-area>
4-
<igx-chip *ngFor="let row of selectedRows" [id]="row.ID" [removable]="true" (remove)="chipRemoved($event)">{{row.Name}}</igx-chip>
5-
</igx-chips-area>
6-
</div>
7-
<button igxButton="icon" [igxToggleAction]="employeesDropDown" [igxDropDownItemNavigation]="employeesDropDown" [igxToggleOutlet]="outlet">
8-
<igx-icon fontSet="material">expand_more</igx-icon>
9-
</button>
1+
<button #button igxButton="raised" [igxToggleAction]="employeesDropDown" [igxDropDownItemNavigation]="employeesDropDown">
2+
Employees<igx-icon fontSet="material">expand_more</igx-icon>
3+
</button>
4+
<div class="chip-container">
5+
<igx-chips-area>
6+
<igx-chip *ngFor="let row of selectedRows" [id]="row.ID" [removable]="true" (remove)="chipRemoved($event)">{{row.Name}}</igx-chip>
7+
</igx-chips-area>
108
</div>
119

12-
<igx-drop-down #employeesDropDown [width]="'300px'" (closing)="handleClosing($event)">
10+
<igx-drop-down #employeesDropDown [width]="'300px'">
1311
<igx-tree-grid #treeGrid igxPreventDocumentScroll [data]="employees" childDataKey="Employees" primaryKey="ID"
1412
width="100%" height="400px" [autoGenerate]="false" [expansionDepth]="1" [rowSelection]="'multiple'"
1513
(rowSelectionChanging)="onRowSelectionChanging($event, treeGrid)">
1614
<igx-column field="Name" dataType="string"></igx-column>
1715
</igx-tree-grid>
1816
</igx-drop-down>
1917

20-
<div class="overlayOutlet" igxOverlayOutlet #outlet="overlay-outlet"></div>

‎src/app/data-entries/dropdown/dropdown-tree-grid-hierarchical-selection/dropdown-tree-grid-hierarchical-selection.component.scss‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
11
.chip-container{
2-
width : 400px;
3-
height: 150px;
4-
resize: both;
2+
width : 500px;
53
overflow: auto;
64
border: 1px solid #ccc;
75
background-color: #FFFBFA;
6+
display: inline-flex;
7+
margin-left:10px;
88
}
9+
igx-chip {
10+
margin-right: 5px;
11+
margin-bottom: 5px;
12+
}
13+
button {
14+
width: 300px;
15+
border: #ccc;
16+
}

‎src/app/data-entries/dropdown/dropdown-tree-grid-hierarchical-selection/dropdown-tree-grid-hierarchical-selection.component.ts‎

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,35 @@
1-
import { Component, OnInit, ViewChild } from '@angular/core';
2-
import { IBaseChipEventArgs, IgxTreeGridComponent, IRowSelectionEventArgs } from 'igniteui-angular';
3-
import { IBaseCancelableBrowserEventArgs } from 'igniteui-angular/lib/core/utils';
1+
import { AfterViewInit, Component,ElementRef, OnInit, ViewChild } from '@angular/core';
2+
import { IBaseChipEventArgs, IgxDropDownComponent, OverlaySettings, IgxTreeGridComponent, IRowSelectionEventArgs, ConnectedPositioningStrategy } from 'igniteui-angular';
43
import { EMPLOYEE_DATA } from './nested-employee-data';
4+
55
@Component({
66
// tslint:disable-next-line:component-selector
77
selector: 'app-dropdown-tree-grid-hierarchical-selection',
88
styleUrls: ['./dropdown-tree-grid-hierarchical-selection.component.scss'],
99
templateUrl: './dropdown-tree-grid-hierarchical-selection.component.html'
1010
})
11-
export class DropdownTreeGridHierarchicalSelectionComponent implements OnInit {
11+
export class DropdownTreeGridHierarchicalSelectionComponent implements OnInit, AfterViewInit {
1212
@ViewChild('treeGrid', { static: true })
1313
public igxTreeGrid: IgxTreeGridComponent;
14+
@ViewChild(IgxDropDownComponent, { static: true }) public igxDropDown: IgxDropDownComponent;
15+
@ViewChild('button', { static: true }) public igxButton: ElementRef;
1416

1517
public employees!: any[];
1618
public selectedRows!: any[];
1719

1820
public ngOnInit(): void {
1921
this.employees = EMPLOYEE_DATA;
20-
21-
this.igxTreeGrid.selectRows([1,4], true);
22+
23+
this.igxTreeGrid.selectRows([1,4], true);
2224
this.selectedRows = [];
2325
this.igxTreeGrid.selectedRows.forEach((row) => this.selectedRows.push(this.employees.find(employee => employee.ID == row)));
2426
}
25-
27+
public ngAfterViewInit(): void {
28+
requestAnimationFrame(() => {
29+
this._overlaySettings.target = this.igxButton.nativeElement;
30+
this.igxDropDown.open(this._overlaySettings);
31+
});
32+
}
2633
public onRowSelectionChanging(args: IRowSelectionEventArgs, grid: IgxTreeGridComponent) {
2734
this.selectedRows = [];
2835
args.newSelection.forEach((val) => this.selectedRows.push(grid.getRowData(val.ID)));
@@ -37,7 +44,9 @@ export class DropdownTreeGridHierarchicalSelectionComponent implements OnInit {
3744
});
3845
}
3946

40-
public handleClosing(event: IBaseCancelableBrowserEventArgs) {
41-
event.cancel = event.event.composedPath().some(e => (e as HTMLElement).nodeName?.toLowerCase() === 'igx-chip');
42-
}
47+
public _overlaySettings: OverlaySettings = {
48+
modal: false,
49+
positionStrategy: new ConnectedPositioningStrategy(),
50+
closeOnOutsideClick: false
51+
};
4352
}

‎src/app/data-entries/dropdown/dropdown-tree-hierarchical-selection/dropdown-tree-hierarchical-selection.component.html‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1-
<div class="container">
2-
<div class="chip-container">
3-
<igx-chips-area>
4-
<igx-chip *ngFor="let node of selectedNodes" [id]="node.data.ID" [removable]="true" (remove)="chipRemoved($event)">{{node.data.Name}}</igx-chip>
5-
</igx-chips-area>
6-
</div>
7-
<button igxButton="icon" [igxToggleAction]="countriesDropDown" [igxDropDownItemNavigation]="countriesDropDown">
8-
<igx-icon fontSet="material">expand_more</igx-icon>
9-
</button>
1+
<button class="button" #button igxButton="raised" [igxToggleAction]="countriesDropDown"
2+
[igxDropDownItemNavigation]="countriesDropDown">
3+
Countries<igx-icon fontSet="material">expand_more</igx-icon>
4+
</button>
5+
<div class="chip-container">
6+
<igx-chips-area>
7+
<igx-chip *ngFor="let node of selectedNodes" [id]="node.data.ID" [removable]="true" (remove)="chipRemoved($event)">{{node.data.Name}}</igx-chip>
8+
</igx-chips-area>
109
</div>
1110

12-
<igx-drop-down #countriesDropDown [height]="'500px'" [width]="'300px'" (closing)="handleClosing($event)">
11+
<igx-drop-down #countriesDropDown [height]="'400px'" [width]="'250px'">
1312
<igx-tree #igxTree selection="BiState" (nodeSelection)="onNodeSelection($event)">
1413
<igx-tree-node *ngFor="let country of countries" [data]="country" [expanded]="true" [selected]="true">
1514
{{ country.Name }}
@@ -18,4 +17,4 @@
1817
</igx-tree-node>
1918
</igx-tree-node>
2019
</igx-tree>
21-
</igx-drop-down>
20+
</igx-drop-down>

‎src/app/data-entries/dropdown/dropdown-tree-hierarchical-selection/dropdown-tree-hierarchical-selection.component.scss‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,19 @@
11
.chip-container{
2-
width : 400px;
3-
height: 150px;
4-
resize: both;
2+
width : 500px;
53
overflow: auto;
64
border: 1px solid #ccc;
75
background-color: #FFFBFA;
6+
display: inline-flex;
7+
margin-left:10px;
88
}
9+
igx-chip {
10+
margin-right: 5px;
11+
margin-bottom: 5px;
12+
}
13+
14+
.button {
15+
width: 250px;
16+
border: #ccc;
17+
}
18+
19+

‎src/app/data-entries/dropdown/dropdown-tree-hierarchical-selection/dropdown-tree-hierarchical-selection.component.ts‎

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,32 @@
1-
import { Component, DoCheck, OnInit, ViewChild } from '@angular/core';
2-
import { IBaseChipEventArgs, IgxTreeComponent, ITreeNodeSelectionEvent } from 'igniteui-angular';
3-
import { IBaseCancelableBrowserEventArgs } from 'igniteui-angular/lib/core/utils';
1+
import { AfterViewInit, Component, DoCheck, OnInit, ViewChild,ElementRef } from '@angular/core';
2+
import { IBaseChipEventArgs, IgxDropDownComponent, IgxTreeComponent, ITreeNodeSelectionEvent, ConnectedPositioningStrategy, OverlaySettings} from 'igniteui-angular';
43
import { COUNTRIES } from './countries';
4+
55
@Component({
66
// tslint:disable-next-line:component-selector
77
selector: 'app-dropdown-tree-hierarchical-selection',
88
styleUrls: ['./dropdown-tree-hierarchical-selection.component.scss'],
99
templateUrl: './dropdown-tree-hierarchical-selection.component.html'
1010
})
11-
export class DropdownTreeHierarchicalSelectionComponent implements OnInit, DoCheck {
12-
@ViewChild('igxTree', { static: true })
13-
public igxTree: IgxTreeComponent;
14-
11+
export class DropdownTreeHierarchicalSelectionComponent implements OnInit, DoCheck, AfterViewInit {
12+
@ViewChild(IgxTreeComponent, { static: true }) public igxTree: IgxTreeComponent;
13+
@ViewChild(IgxDropDownComponent, { static: true }) public igxDropDown: IgxDropDownComponent;
14+
@ViewChild('button', { static: true }) public igxButton: ElementRef;
15+
1516
public countries!: any[];
1617
public selectedNodes!: any[];
1718

1819
public ngOnInit(): void {
1920
this.countries = COUNTRIES;
2021
}
2122

23+
public ngAfterViewInit(): void {
24+
requestAnimationFrame(() => {
25+
this._overlaySettings.target = this.igxButton.nativeElement;
26+
this.igxDropDown.open(this._overlaySettings);
27+
});
28+
}
29+
2230
public ngDoCheck(){
2331
this.selectedNodes = this.igxTree.nodes?.filter(node => node.selected == true);
2432
}
@@ -36,7 +44,11 @@ export class DropdownTreeHierarchicalSelectionComponent implements OnInit, DoChe
3644
});
3745
}
3846

39-
public handleClosing(event: IBaseCancelableBrowserEventArgs) {
40-
event.cancel = event.event.composedPath().some(e => (e as HTMLElement).nodeName?.toLowerCase() === 'igx-chip');
41-
}
47+
public _overlaySettings: OverlaySettings = {
48+
modal: false,
49+
positionStrategy: new ConnectedPositioningStrategy(),
50+
closeOnOutsideClick: false
51+
};
52+
53+
4254
}

0 commit comments

Comments
 (0)