|
1 | | -import { AfterViewInit, Component, ViewChild } from '@angular/core'; |
2 | | -import { IGridCreatedEventArgs, IgxHierarchicalGridComponent, IgxRowIslandComponent, IgxColumnComponent } from 'igniteui-angular'; |
3 | | -import { IDataState, RemoteLoDService } from '../../services/remote-lod.service'; |
| 1 | +import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'; |
| 2 | +import { IGridCreatedEventArgs, IgxHierarchicalGridComponent, IgxRowIslandComponent, IgxColumnComponent, FilteringExpressionsTree, IgxNumberFilteringOperand, IgxStringFilteringOperand, EntityType, IGX_HIERARCHICAL_GRID_DIRECTIVES, FilteringLogic } from 'igniteui-angular'; |
4 | 3 | import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; |
| 4 | +import { HttpClient } from '@angular/common/http'; |
| 5 | + |
| 6 | +const API_ENDPOINT = 'https://data-northwind.indigo.design'; |
5 | 7 |
|
6 | 8 | @Component({ |
7 | | - providers: [RemoteLoDService], |
8 | 9 | selector: 'app-hierarchical-grid-lod', |
9 | 10 | styleUrls: ['./hierarchical-grid-lod.component.scss'], |
10 | 11 | templateUrl: './hierarchical-grid-lod.component.html', |
11 | | - imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent] |
| 12 | + imports: [IGX_HIERARCHICAL_GRID_DIRECTIVES, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent] |
12 | 13 | }) |
13 | | -export class HierarchicalGridLoDSampleComponent implements AfterViewInit { |
| 14 | +export class HierarchicalGridLoDSampleComponent implements OnInit, AfterViewInit { |
14 | 15 | @ViewChild('hGrid', { static: true }) |
15 | 16 | public hGrid: IgxHierarchicalGridComponent; |
16 | 17 |
|
17 | | - constructor(private remoteService: RemoteLoDService) { } |
| 18 | + public remoteData = []; |
| 19 | + public schema: EntityType[] = [ |
| 20 | + { |
| 21 | + name: 'Customers', |
| 22 | + fields: [ |
| 23 | + { field: 'customerId', dataType: 'string' }, |
| 24 | + { field: 'companyName', dataType: 'string' }, |
| 25 | + { field: 'contactName', dataType: 'string' }, |
| 26 | + { field: 'contactTitle', dataType: 'string' } |
| 27 | + ], |
| 28 | + childEntities: [ |
| 29 | + { |
| 30 | + name: 'Orders', |
| 31 | + fields: [ |
| 32 | + { field: 'customerId', dataType: 'string' }, // first field will be treated as foreign key |
| 33 | + { field: 'orderId', dataType: 'number' }, |
| 34 | + { field: 'employeeId', dataType: 'number' }, |
| 35 | + { field: 'shipVia', dataType: 'string' }, |
| 36 | + { field: 'freight', dataType: 'number' } |
| 37 | + ], |
| 38 | + childEntities: [ |
| 39 | + { |
| 40 | + name: 'Details', |
| 41 | + fields: [ |
| 42 | + { field: 'orderId', dataType: 'number' }, // first field will be treated as foreign key |
| 43 | + { field: 'productId', dataType: 'number' }, |
| 44 | + { field: 'unitPrice', dataType: 'number' }, |
| 45 | + { field: 'quantity', dataType: 'number' }, |
| 46 | + { field: 'discount', dataType: 'number' } |
| 47 | + ] |
| 48 | + } |
| 49 | + ] |
| 50 | + } |
| 51 | + ] |
| 52 | + } |
| 53 | + ]; |
| 54 | + |
| 55 | + constructor(private http: HttpClient) {} |
| 56 | + |
| 57 | + public ngOnInit() { |
| 58 | + const ordersTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Orders', ['customerId']); |
| 59 | + ordersTree.filteringOperands.push({ |
| 60 | + fieldName: 'freight', |
| 61 | + ignoreCase: false, |
| 62 | + condition: IgxNumberFilteringOperand.instance().condition('greaterThanOrEqualTo'), |
| 63 | + conditionName: IgxNumberFilteringOperand.instance().condition('greaterThanOrEqualTo').name, |
| 64 | + searchVal: '500' |
| 65 | + }); |
| 66 | + |
| 67 | + const customersTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Customers', ['customerId', 'companyName', 'contactName', 'contactTitle']); |
| 68 | + customersTree.filteringOperands.push({ |
| 69 | + fieldName: 'customerId', |
| 70 | + condition: IgxStringFilteringOperand.instance().condition('inQuery'), |
| 71 | + conditionName: IgxStringFilteringOperand.instance().condition('inQuery').name, |
| 72 | + ignoreCase: false, |
| 73 | + searchTree: ordersTree |
| 74 | + }); |
| 75 | + this.hGrid.advancedFilteringExpressionsTree = customersTree; |
| 76 | + } |
18 | 77 |
|
19 | 78 | public ngAfterViewInit() { |
20 | | - const dataState: IDataState = { |
21 | | - key: 'Customers', |
22 | | - parentID: '', |
23 | | - parentKey: '', |
24 | | - rootLevel: true |
25 | | - }; |
| 79 | + this.refreshRootGridData(); |
| 80 | + } |
| 81 | + |
| 82 | + public refreshRootGridData() { |
| 83 | + const tree = this.hGrid.advancedFilteringExpressionsTree; |
26 | 84 | this.hGrid.isLoading = true; |
27 | | - this.remoteService.getData(dataState).subscribe( |
28 | | - (data) => { |
| 85 | + if (tree) { |
| 86 | + this.http.post(`${API_ENDPOINT}/QueryBuilder/ExecuteQuery`, tree).subscribe(data =>{ |
| 87 | + this.remoteData = Object.values(data)[0]; |
29 | 88 | this.hGrid.isLoading = false; |
30 | | - this.hGrid.data = data; |
31 | 89 | this.hGrid.cdr.detectChanges(); |
32 | | - }, |
33 | | - (error) => { |
34 | | - this.hGrid.emptyGridMessage = error.message; |
| 90 | + }); |
| 91 | + } else { |
| 92 | + this.http.get(`${API_ENDPOINT}/Customers`).subscribe(data => { |
| 93 | + this.remoteData = Object.values(data); |
35 | 94 | this.hGrid.isLoading = false; |
36 | 95 | this.hGrid.cdr.detectChanges(); |
37 | | - } |
38 | | - ); |
| 96 | + }); |
| 97 | + } |
39 | 98 | } |
40 | 99 |
|
41 | | - public dateFormatter(val: string) { |
42 | | - return new Intl.DateTimeFormat('en-US').format(new Date(val)); |
| 100 | + public gridCreated(event: IGridCreatedEventArgs) { |
| 101 | + event.grid.isLoading = true; |
| 102 | + const url = this.buildUrl(event); |
| 103 | + this.http.get(url).subscribe(data => { |
| 104 | + event.grid.data = Object.values(data); |
| 105 | + event.grid.isLoading = false; |
| 106 | + this.hGrid.cdr.detectChanges(); |
| 107 | + }); |
43 | 108 | } |
44 | 109 |
|
45 | | - public gridCreated(event: IGridCreatedEventArgs, _parentKey: string) { |
46 | | - const dataState: IDataState = { |
47 | | - key: event.owner.key, |
48 | | - parentID: event.parentID, |
49 | | - parentKey: _parentKey, |
50 | | - rootLevel: false |
51 | | - }; |
52 | | - event.grid.isLoading = true; |
53 | | - this.remoteService.getData(dataState).subscribe( |
54 | | - (data) => { |
55 | | - event.grid.isLoading = false; |
56 | | - event.grid.data = data; |
57 | | - event.grid.cdr.detectChanges(); |
58 | | - }, |
59 | | - (error) => { |
60 | | - event.grid.emptyGridMessage = error.message; |
61 | | - event.grid.isLoading = false; |
62 | | - event.grid.cdr.detectChanges(); |
63 | | - } |
64 | | - ); |
| 110 | + private buildUrl(event: IGridCreatedEventArgs) { |
| 111 | + const parentKey = (event.grid.parent as any).key ?? this.schema[0].name; |
| 112 | + const url = `${API_ENDPOINT}/${parentKey}/${event.parentID}/${event.owner.key}`; |
| 113 | + return url; |
65 | 114 | } |
66 | 115 | } |
0 commit comments