|
1 | | -import { Component, ViewChild, AfterViewInit } from '@angular/core'; |
| 1 | +import { Component, ViewChild, OnInit, ChangeDetectorRef } from '@angular/core'; |
2 | 2 | import { |
3 | 3 | IgxRowIslandComponent, |
4 | 4 | IgxHierarchicalGridComponent, |
5 | 5 | IGridCreatedEventArgs, |
6 | | - GridSelectionMode, |
7 | | - IGX_HIERARCHICAL_GRID_DIRECTIVES |
| 6 | + IGX_HIERARCHICAL_GRID_DIRECTIVES, |
| 7 | + FilteringExpressionsTree, |
| 8 | + IgxStringFilteringOperand |
8 | 9 | } from 'igniteui-angular'; |
9 | | -import { RemoteService } from '../shared/remote.service'; |
| 10 | +import { HttpClient } from '@angular/common/http'; |
| 11 | + |
| 12 | +const API_ENDPOINT = 'https://data-northwind.indigo.design'; |
10 | 13 |
|
11 | 14 | @Component({ |
12 | 15 | selector: 'app-hierarchical-grid-remote-sample', |
13 | 16 | templateUrl: 'hierarchical-grid-remote.sample.html', |
14 | 17 | styleUrls: ['hierarchical-grid-remote.sample.scss'], |
15 | | - providers: [RemoteService], |
16 | 18 | imports: [IGX_HIERARCHICAL_GRID_DIRECTIVES] |
17 | 19 | }) |
18 | | -export class HierarchicalGridRemoteSampleComponent implements AfterViewInit { |
19 | | - @ViewChild('rowIsland1', { static: true }) |
20 | | - private rowIsland1: IgxRowIslandComponent; |
21 | | - |
| 20 | +export class HierarchicalGridRemoteSampleComponent implements OnInit { |
22 | 21 | @ViewChild('hGrid', { static: true }) |
23 | 22 | private hGrid: IgxHierarchicalGridComponent; |
24 | 23 |
|
25 | 24 | public selectionMode; |
26 | 25 | public remoteData = []; |
27 | 26 | public primaryKeys = [ |
28 | | - { name: 'CustomerID', type: 'string', level: 0 }, |
29 | | - { name: 'OrderID', type: 'number', level: 1 }, |
30 | | - { name: 'EmployeeID', type: 'number', level: 2 }, |
31 | | - { name: 'ProductID', type: 'number', level: 2 } |
| 27 | + { name: 'Customers', type: 'string', level: 0 }, |
| 28 | + { name: 'Orders', type: 'number', level: 1 }, |
| 29 | + { name: 'Details', type: 'number', level: 2 } |
32 | 30 | ]; |
33 | 31 |
|
34 | | - constructor(private remoteService: RemoteService) { |
35 | | - remoteService.url = 'https://services.odata.org/V4/Northwind/Northwind.svc/'; |
36 | | - |
37 | | - this.remoteService.urlBuilder = (dataState) => this.buildUrl(dataState); |
38 | | - this.selectionMode = GridSelectionMode.none; |
39 | | - } |
40 | | - |
41 | | - public buildUrl(dataState) { |
42 | | - let qS = ''; |
43 | | - if (dataState) { |
44 | | - qS += `${dataState.key}?`; |
| 32 | + constructor(private http: HttpClient, private cdr: ChangeDetectorRef) {} |
45 | 33 |
|
46 | | - const level = dataState.level; |
47 | | - if (level > 0) { |
48 | | - const parentKey = this.primaryKeys.find((key) => key.level === level - 1); |
49 | | - const parentID = typeof dataState.parentID !== 'object' ? dataState.parentID : dataState.parentID[parentKey.name]; |
| 34 | + public ngOnInit() { |
| 35 | + const ordersTree = new FilteringExpressionsTree(0, undefined, 'Orders', ['shipVia']); |
| 36 | + ordersTree.filteringOperands.push({ |
| 37 | + fieldName: 'shipVia', |
| 38 | + ignoreCase: false, |
| 39 | + conditionName: IgxStringFilteringOperand.instance().condition('equals').name, |
| 40 | + searchVal: 'AirCargo' |
| 41 | + }); |
50 | 42 |
|
51 | | - if (parentKey.type === 'string') { |
52 | | - qS += `$filter=${parentKey.name} eq '${parentID}'`; |
53 | | - } else { |
54 | | - qS += `$filter=${parentKey.name} eq ${parentID}`; |
55 | | - } |
56 | | - } |
57 | | - } |
58 | | - return `${this.remoteService.url}${qS}`; |
| 43 | + const customersTree = new FilteringExpressionsTree(0, undefined, 'Customers', ['customerId', 'companyName', 'contactName', 'contactTitle']); |
| 44 | + // customersTree.filteringOperands.push({ |
| 45 | + // fieldName: 'customerId', |
| 46 | + // conditionName: IgxStringFilteringOperand.instance().condition('inQuery').name, |
| 47 | + // ignoreCase: false, |
| 48 | + // searchTree: ordersTree |
| 49 | + // }); |
| 50 | + customersTree.filteringOperands.push({ |
| 51 | + fieldName: 'customerId', |
| 52 | + ignoreCase: false, |
| 53 | + conditionName: IgxStringFilteringOperand.instance().condition('startsWith').name, |
| 54 | + searchVal: 'A' |
| 55 | + }); |
| 56 | + this.hGrid.advancedFilteringExpressionsTree = customersTree; |
59 | 57 | } |
60 | 58 |
|
61 | 59 | public ngAfterViewInit() { |
62 | | - this.remoteService.getData({ parentID: null, level: 0, key: 'Customers' }, (data) => { |
63 | | - this.remoteData = data['value']; |
| 60 | + this.hGrid.isLoading = true; |
| 61 | + this.http.post(`${API_ENDPOINT}/QueryBuilder/ExecuteQuery`, this.hGrid.advancedFilteringExpressionsTree).subscribe(data =>{ |
| 62 | + console.log('data', data); |
| 63 | + this.remoteData = Object.values(data)[0]; |
64 | 64 | this.hGrid.isLoading = false; |
| 65 | + this.cdr.detectChanges(); |
| 66 | + this.calculateColsInView(); |
65 | 67 | }); |
66 | 68 | } |
67 | 69 |
|
68 | | - public setterChange() { |
69 | | - this.rowIsland1.rowSelection = this.rowIsland1.rowSelection === GridSelectionMode.multiple |
70 | | - ? GridSelectionMode.none : GridSelectionMode.multiple; |
71 | | - } |
72 | | - |
73 | | - public setterBindingChange() { |
74 | | - this.selectionMode = this.selectionMode === GridSelectionMode.none ? GridSelectionMode.multiple : GridSelectionMode.none; |
| 70 | + private calculateColsInView() { |
| 71 | + this.hGrid.columns.forEach(column => |
| 72 | + column.hidden = !this.hGrid.advancedFilteringExpressionsTree.returnFields.includes(column.field)); |
75 | 73 | } |
76 | 74 |
|
77 | 75 | public gridCreated(event: IGridCreatedEventArgs, rowIsland: IgxRowIslandComponent) { |
78 | 76 | event.grid.isLoading = true; |
79 | | - this.remoteService.getData({ parentID: event.parentID, level: rowIsland.level, key: rowIsland.key }, (data) => { |
80 | | - event.grid.data = data['value']; |
| 77 | + const url = this.buildUrl(event, rowIsland); |
| 78 | + this.http.get(url).subscribe(data => { |
| 79 | + console.log('data', data); |
| 80 | + event.grid.data = Object.values(data); |
81 | 81 | event.grid.isLoading = false; |
82 | | - event.grid.cdr.detectChanges(); |
| 82 | + this.cdr.detectChanges(); |
83 | 83 | }); |
84 | 84 | } |
| 85 | + |
| 86 | + private buildUrl(event: IGridCreatedEventArgs, rowIsland: IgxRowIslandComponent) { |
| 87 | + const rowIslandKey = this.primaryKeys.find(key => key.level === rowIsland.level).name; |
| 88 | + const parentKey = (event.grid.parent as any).key ?? event.grid.parent.advancedFilteringExpressionsTree.entity; |
| 89 | + const url = `${API_ENDPOINT}/${parentKey}/${event.parentID}/${rowIslandKey}`; |
| 90 | + return url; |
| 91 | + } |
85 | 92 | } |
0 commit comments