feat(h-grid): update samples with adv filtering subqueries

src/app/hierarchical-grid/hierarchical-grid-advanced-filtering/hierarchical-grid-advanced-filtering.component.html

@@ -1,6 +1,6 @@
 <div class="grid__wrapper">
- <igx-hierarchical-grid [igxPreventDocumentScroll]="true"  class="hgrid" [data]="localdata" [autoGenerate]="false" [allowAdvancedFiltering]="true"
- [height]="'600px'" [width]="'100%'" [rowHeight]="'65px'" #hierarchicalGrid>
+ <igx-hierarchical-grid #hGrid [igxPreventDocumentScroll]="true" class="hgrid" [data]="localData" [autoGenerate]="false" [allowAdvancedFiltering]="true"
+ [height]="'600px'" [width]="'100%'" [rowHeight]="'65px'">
  <igx-grid-toolbar></igx-grid-toolbar>
 
  <igx-column field="Artist"></igx-column>
@@ -16,22 +16,24 @@
  <igx-column field="GrammyAwards" header="Grammy Awards" dataType="number"></igx-column>
 
  <igx-row-island [height]="null" [key]="'Albums'" [autoGenerate]="false" [allowAdvancedFiltering]="true">
- <igx-grid-toolbar *igxGridToolbar="let childGrid"></igx-grid-toolbar>
+  <igx-grid-toolbar *igxGridToolbar="let childGrid"></igx-grid-toolbar>
 
  <igx-column field="Album"></igx-column>
  <igx-column field="LaunchDate" header="Launch Date" [dataType]="'date'"></igx-column>
  <igx-column field="BillboardReview" header="Billboard Review" dataType="number"></igx-column>
  <igx-column field="USBillboard200" header="US Billboard 200" dataType="number"></igx-column>
- <igx-row-island [height]="null" [key]="'Songs'" [autoGenerate]="false" >
+ <igx-column field="Artist" header="Artist" [hidden]="true"></igx-column>
+
+ <igx-row-island [height]="null" [key]="'Songs'" [autoGenerate]="false" >
  <igx-column field="Number" header="No."></igx-column>
  <igx-column field="Title"></igx-column>
  <igx-column field="Released" dataType="date"></igx-column>
  <igx-column field="Genre"></igx-column>
- </igx-row-island>
+  </igx-row-island>
  </igx-row-island>
 
  <igx-row-island [height]="null" [key]="'Tours'" [autoGenerate]="false" [allowAdvancedFiltering]="true">
-<igx-grid-toolbar *igxGridToolbar="let childGrid"></igx-grid-toolbar>
+ <igx-grid-toolbar *igxGridToolbar="let childGrid"></igx-grid-toolbar>
 
  <igx-column field="Tour"></igx-column>
  <igx-column field="StartedOn" header="Started on"></igx-column>

src/app/hierarchical-grid/hierarchical-grid-advanced-filtering/hierarchical-grid-advanced-filtering.component.ts

@@ -1,6 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, AfterViewInit, ViewChild, ChangeDetectorRef } from '@angular/core';
 import { SINGERS } from '../../data/singersData';
-import { IgxHierarchicalGridComponent, IgxGridToolbarComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxGridToolbarDirective } from 'igniteui-angular';
+import { IgxHierarchicalGridComponent, IgxGridToolbarComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxGridToolbarDirective, FilteringExpressionsTree, IgxDateFilteringOperand, IgxStringFilteringOperand, IgxNumberFilteringOperand, FilteringLogic } from 'igniteui-angular';
 import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive';
 
 @Component({
@@ -10,11 +10,33 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro
  imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxGridToolbarDirective]
 })
 
-export class HGridAdvancedFilteringSampleComponent {
- public localdata;
+export class HGridAdvancedFilteringSampleComponent implements AfterViewInit{
+ @ViewChild('hGrid', { static: true })
+ private hGrid: IgxHierarchicalGridComponent;
 
- constructor() {
- this.localdata = SINGERS;
+ public localData;
+
+ constructor(private cdr: ChangeDetectorRef) {
+ this.localData = SINGERS;
+ }
+
+ public ngAfterViewInit() {
+ const albumsTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Albums', ['Artist']);
+ albumsTree.filteringOperands.push({
+ fieldName: 'LaunchDate',
+ condition: IgxDateFilteringOperand.instance().condition('after'),
+ conditionName: IgxDateFilteringOperand.instance().condition('after').name,
+ searchVal: new Date(2017, 1, 1)
+ });
+ const tree = new FilteringExpressionsTree(FilteringLogic.And);
+ tree.filteringOperands.push({
+ fieldName: 'Artist',
+ condition: IgxStringFilteringOperand.instance().condition('inQuery'),
+ conditionName: IgxStringFilteringOperand.instance().condition('inQuery').name,
+ searchTree: albumsTree
+ });
+ this.hGrid.advancedFilteringExpressionsTree = tree;
+ this.cdr.detectChanges();
  }
 
  public formatter = (a) => a;

src/app/hierarchical-grid/hierarchical-grid-lod/hierarchical-grid-lod.component.html

@@ -1,22 +1,34 @@
 <div class="grid__wrapper">
- <igx-hierarchical-grid [igxPreventDocumentScroll]="true" #hGrid [primaryKey]="'CustomerID'" [autoGenerate]="false" [height]="'580px'" [width]="'100%'">
- <igx-column field="CustomerID" [hidden]="true"></igx-column>
- <igx-column field="CompanyName"></igx-column>
- <igx-column field="ContactName"></igx-column>
- <igx-column field="ContactTitle"></igx-column>
- <igx-column field="Country"></igx-column>
- <igx-column field="Phone"></igx-column>
- <igx-row-island [height]="null" [key]="'Orders'" [primaryKey]="'OrderID'" [autoGenerate]="false" (gridCreated)="gridCreated($event, 'CustomerID')" [width]="'100%'">
- <igx-column field="OrderID" [hidden]="true"></igx-column>
- <igx-column field="ShipCountry"></igx-column>
- <igx-column field="ShipCity"></igx-column>
- <igx-column field="ShipAddress"></igx-column>
- <igx-column field="OrderDate" [formatter]="dateFormatter"></igx-column>
- <igx-row-island [height]="null" [key]="'Order_Details'" [primaryKey]="'ProductID'" [autoGenerate]="false" (gridCreated)="gridCreated($event, 'OrderID')">
- <igx-column field="ProductID" [hidden]="true"></igx-column>
- <igx-column field="Quantity"></igx-column>
- <igx-column field="UnitPrice"></igx-column>
- <igx-column field="Discount"></igx-column>
+ <igx-hierarchical-grid #hGrid
+ [data]="remoteData"
+ [isLoading]="true"
+ [primaryKey]="'customerId'"
+ [autoGenerate]="false"
+ [height]="'580px'"
+ [width]="'100%'"
+ [igxPreventDocumentScroll]="true"
+ [allowAdvancedFiltering]="true"
+ [schema]="schema"
+ (advancedFilteringExpressionsTreeChange)="refreshRootGridData()">
+ <igx-grid-toolbar></igx-grid-toolbar>
+
+ <igx-column field="customerId" [dataType]="'string'"></igx-column>
+ <igx-column field="companyName" [dataType]="'string'"></igx-column>
+ <igx-column field="contactName" [dataType]="'string'"></igx-column>
+ <igx-column field="contactTitle" [dataType]="'string'"></igx-column>
+
+ <igx-row-island #rowIsland1 [key]="'Orders'" [primaryKey]="'orderId'" [autoGenerate]="false" (gridCreated)="gridCreated($event)">
+ <igx-column field="orderId"></igx-column>
+ <igx-column field="customerId"></igx-column>
+ <igx-column field="shipVia"></igx-column>
+ <igx-column field="freight"></igx-column>
+
+ <igx-row-island #rowIsland2 [key]="'Details'" [primaryKey]="'orderId'" [autoGenerate]="false" (gridCreated)="gridCreated($event)">
+ <igx-column field="orderId"></igx-column>
+ <igx-column field="productId"></igx-column>
+ <igx-column field="unitPrice"></igx-column>
+ <igx-column field="quantity"></igx-column>
+ <igx-column field="discount"></igx-column>
  </igx-row-island>
  </igx-row-island>
  </igx-hierarchical-grid>

src/app/hierarchical-grid/hierarchical-grid-lod/hierarchical-grid-lod.component.ts

@@ -1,66 +1,115 @@
-import { AfterViewInit, Component, ViewChild } from '@angular/core';
-import { IGridCreatedEventArgs, IgxHierarchicalGridComponent, IgxRowIslandComponent, IgxColumnComponent } from 'igniteui-angular';
-import { IDataState, RemoteLoDService } from '../../services/remote-lod.service';
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
+import { IGridCreatedEventArgs, IgxHierarchicalGridComponent, IgxRowIslandComponent, IgxColumnComponent, FilteringExpressionsTree, IgxNumberFilteringOperand, IgxStringFilteringOperand, EntityType, IGX_HIERARCHICAL_GRID_DIRECTIVES, FilteringLogic } from 'igniteui-angular';
 import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive';
+import { HttpClient } from '@angular/common/http';
+
+const API_ENDPOINT = 'https://data-northwind.indigo.design';
 
 @Component({
- providers: [RemoteLoDService],
  selector: 'app-hierarchical-grid-lod',
  styleUrls: ['./hierarchical-grid-lod.component.scss'],
  templateUrl: './hierarchical-grid-lod.component.html',
- imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent]
+ imports: [IGX_HIERARCHICAL_GRID_DIRECTIVES, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent]
 })
-export class HierarchicalGridLoDSampleComponent implements AfterViewInit {
+export class HierarchicalGridLoDSampleComponent implements OnInit, AfterViewInit {
  @ViewChild('hGrid', { static: true })
  public hGrid: IgxHierarchicalGridComponent;
 
- constructor(private remoteService: RemoteLoDService) { }
+ public remoteData = [];
+ public schema: EntityType[] = [
+ {
+ name: 'Customers',
+ fields: [
+ { field: 'customerId', dataType: 'string' },
+ { field: 'companyName', dataType: 'string' },
+ { field: 'contactName', dataType: 'string' },
+ { field: 'contactTitle', dataType: 'string' }
+ ],
+ childEntities: [
+ {
+ name: 'Orders',
+ fields: [
+ { field: 'customerId', dataType: 'string' }, // first field will be treated as foreign key
+ { field: 'orderId', dataType: 'number' },
+ { field: 'employeeId', dataType: 'number' },
+ { field: 'shipVia', dataType: 'string' },
+ { field: 'freight', dataType: 'number' }
+ ],
+ childEntities: [
+ {
+ name: 'Details',
+ fields: [
+ { field: 'orderId', dataType: 'number' }, // first field will be treated as foreign key
+ { field: 'productId', dataType: 'number' },
+ { field: 'unitPrice', dataType: 'number' },
+ { field: 'quantity', dataType: 'number' },
+ { field: 'discount', dataType: 'number' }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ];
+
+ constructor(private http: HttpClient) {}
+
+ public ngOnInit() {
+ const ordersTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Orders', ['customerId']);
+ ordersTree.filteringOperands.push({
+ fieldName: 'freight',
+ ignoreCase: false,
+ condition: IgxNumberFilteringOperand.instance().condition('greaterThanOrEqualTo'),
+ conditionName: IgxNumberFilteringOperand.instance().condition('greaterThanOrEqualTo').name,
+ searchVal: '500'
+ });
+
+ const customersTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Customers', ['customerId', 'companyName', 'contactName', 'contactTitle']);
+ customersTree.filteringOperands.push({
+ fieldName: 'customerId',
+ condition: IgxStringFilteringOperand.instance().condition('inQuery'),
+ conditionName: IgxStringFilteringOperand.instance().condition('inQuery').name,
+ ignoreCase: false,
+ searchTree: ordersTree
+ });
+ this.hGrid.advancedFilteringExpressionsTree = customersTree;
+ }
 
  public ngAfterViewInit() {
- const dataState: IDataState = {
- key: 'Customers',
- parentID: '',
- parentKey: '',
- rootLevel: true
- };
+ this.refreshRootGridData();
+ }
+
+ public refreshRootGridData() {
+ const tree = this.hGrid.advancedFilteringExpressionsTree;
  this.hGrid.isLoading = true;
- this.remoteService.getData(dataState).subscribe(
- (data) => {
+ if (tree) {
+ this.http.post(`${API_ENDPOINT}/QueryBuilder/ExecuteQuery`, tree).subscribe(data =>{
+ this.remoteData = Object.values(data)[0];
  this.hGrid.isLoading = false;
- this.hGrid.data = data;
  this.hGrid.cdr.detectChanges();
- },
- (error) => {
- this.hGrid.emptyGridMessage = error.message;
+ });
+ } else {
+ this.http.get(`${API_ENDPOINT}/Customers`).subscribe(data => {
+ this.remoteData = Object.values(data);
  this.hGrid.isLoading = false;
  this.hGrid.cdr.detectChanges();
- }
- );
+ });
+ }
  }
 
- public dateFormatter(val: string) {
- return new Intl.DateTimeFormat('en-US').format(new Date(val));
+ public gridCreated(event: IGridCreatedEventArgs) {
+ event.grid.isLoading = true;
+ const url = this.buildUrl(event);
+ this.http.get(url).subscribe(data => {
+ event.grid.data = Object.values(data);
+ event.grid.isLoading = false;
+ this.hGrid.cdr.detectChanges();
+ });
  }
 
- public gridCreated(event: IGridCreatedEventArgs, _parentKey: string) {
- const dataState: IDataState = {
- key: event.owner.key,
- parentID: event.parentID,
- parentKey: _parentKey,
- rootLevel: false
- };
- event.grid.isLoading = true;
- this.remoteService.getData(dataState).subscribe(
- (data) => {
- event.grid.isLoading = false;
- event.grid.data = data;
- event.grid.cdr.detectChanges();
- },
- (error) => {
- event.grid.emptyGridMessage = error.message;
- event.grid.isLoading = false;
- event.grid.cdr.detectChanges();
- }
- );
+ private buildUrl(event: IGridCreatedEventArgs) {
+ const parentKey = (event.grid.parent as any).key ?? this.schema[0].name;
+ const url = `${API_ENDPOINT}/${parentKey}/${event.parentID}/${event.owner.key}`;
+ return url;
  }
 }