feat(filtering): adding advanced remote filtering samples

live-editing/configs/GridConfigGenerator.ts

@@ -732,6 +732,16 @@ export class GridConfigGenerator implements IConfigGenerator {
             })
         }));
 
+        configs.push(new Config({
+            component: 'AdvancedRemoteFilteringSampleComponent',
+            additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', 'src/app/services/remoteFiltering.service.ts'],
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxPreventDocumentScrollModule', 'IgxGridModule', 'AdvancedRemoteFilteringSampleComponent'],
+                ngDeclarations: ['AdvancedRemoteFilteringSampleComponent'],
+                ngImports: ['IgxPreventDocumentScrollModule', 'IgxGridModule']
+            })
+        }));
+
         configs.push(new Config({
             component: 'GridMultiCellSelectionComponent',
             additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/nwindData.ts'],

live-editing/configs/TreeGridConfigGenerator.ts

@@ -615,6 +615,18 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: '/tree-grid/'
         }));
 
+        // TreeGrid Advanced Remote Filtering sample
+        configs.push(new Config({
+            additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/tree-grid/data/employees-flat.ts', '/src/app/tree-grid/services/remoteFilteringService.ts'],
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'TreeGridAdvancedRemoteFilteringComponent', 'IgxIconModule', 'IgxToastModule'],
+                ngDeclarations: ['TreeGridAdvancedRemoteFilteringComponent'],
+                ngImports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'IgxIconModule', 'IgxToastModule']
+            }),
+            component: 'TreeGridAdvancedRemoteFilteringComponent',
+            shortenComponentPathBy: '/tree-grid/'
+        }));
+
         // TreeGrid multi cell selection
         configs.push(new Config({
             additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/tree-grid/data/orders.ts'],
@@ -783,7 +795,7 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
         configs.push(new Config({
             additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/tree-grid/tree-grid-clipboard-operations-sample/data.ts'],
             appModuleConfig: new AppModuleConfig({
-                imports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'TreeGridClipboardSampleComponent', 'IgxSwitchModule' , 'IgxInputGroupModule', 'IgxIconModule', 'IgxRippleModule', 'IgxButtonModule'],
+                imports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'TreeGridClipboardSampleComponent', 'IgxSwitchModule', 'IgxInputGroupModule', 'IgxIconModule', 'IgxRippleModule', 'IgxButtonModule'],
                 ngDeclarations: ['TreeGridClipboardSampleComponent'],
                 ngImports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'IgxSwitchModule', 'IgxInputGroupModule', 'IgxIconModule', 'IgxRippleModule', 'IgxButtonModule']
             }),
@@ -1048,7 +1060,7 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
         configs.push(new Config({
             additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/tree-grid/data/orders.ts'],
             appModuleConfig: new AppModuleConfig({
-                imports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'TreeGridExportVisualizationComponent', 'IgxToggleModule' , 'IgxButtonModule',
+                imports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'TreeGridExportVisualizationComponent', 'IgxToggleModule', 'IgxButtonModule',
                     'IgxExcelExporterService', 'IgxCsvExporterService'],
                 ngDeclarations: ['TreeGridExportVisualizationComponent'],
                 ngImports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'IgxToggleModule', 'IgxButtonModule'],
@@ -1199,7 +1211,7 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
             })
         }));
 
-         configs.push(new Config({
+        configs.push(new Config({
             additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/tree-grid/data/orders.ts'],
             appModuleConfig: new AppModuleConfig({
                 imports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'TreeGridSummaryExportComponent', 'IgxIconModule', 'IgxExcelExporterService'],

src/app/grid/grid-advanced-remote-filtering-sample/advanced-remote-filtering-sample.component.html

@@ -0,0 +1,23 @@
+<div class="grid__wrapper">
+    <igx-grid [igxPreventDocumentScroll]="true" #grid [data]="remoteData | async" [height]="'460px'" [width]="'100%'" [autoGenerate]="false"
+        [filterStrategy]="noopFilterStrategy" [allowAdvancedFiltering]="true" [advancedFilteringExpressionsTree]="gridExpressionsTree"
+        [sortStrategy]="noopSortStrategy">
+        <igx-grid-toolbar></igx-grid-toolbar>
+        <igx-column [field]="'OrderID'" dataType="number" [sortable]="true"></igx-column>
+        <igx-column [field]="'ShipName'" [sortable]="true"></igx-column>
+        <igx-column [field]="'Freight'" dataType="number" [headerClasses]="'headerAlignSyle'" [sortable]="true">
+            <ng-template igxHeader>
+                <span class="cellAlignSyle">Freight</span>
+            </ng-template>
+            <ng-template igxCell let-val>
+                <div class="currency-badge-container">
+                    <igx-badge *ngIf="val>50" type="success" position="bottom-right" icon="arrow_upward" class="badge-left"></igx-badge>
+                    <igx-badge *ngIf="val<=50" type="error" position="bottom-right" icon="arrow_downward" class="error badge-left"></igx-badge>
+                    <span class="cellAlignSyle" [class.up]="val>50" [class.down]="val<=50">{{ formatNumber(val) }}</span>
+                </div>
+            </ng-template>
+        </igx-column>
+        <igx-column [field]="'OrderDate'" dataType="dateTime" [sortable]="true"></igx-column>
+        <igx-column [field]="'RequiredDate'" dataType="dateTime" [sortable]="true"></igx-column>
+    </igx-grid>
+</div>

src/app/grid/grid-advanced-remote-filtering-sample/advanced-remote-filtering-sample.component.scss

@@ -0,0 +1,34 @@
+.grid__wrapper {
+    margin: 0 auto;
+    padding: 16px;
+}
+
+.cellAlignSyle {
+    text-align: right;
+    float:right;
+}
+
+.cellAlignSyle > span {
+    float:right;
+}
+
+.up {
+    color: green;
+}
+
+.down {
+    color: red;
+}
+
+.headerAlignSyle {
+    text-align: right !important;
+}
+
+.currency-badge-container {
+    width: 80px; 
+    float: right;
+}
+
+.badge-left {
+    float: left;
+}

src/app/grid/grid-advanced-remote-filtering-sample/advanced-remote-filtering-sample.component.ts

@@ -0,0 +1,140 @@
+import { ChangeDetectorRef, Component, OnInit, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
+import {
+    FilteringExpressionsTree,
+    FilteringLogic,
+    IFilteringExpressionsTree,
+    IgxDateFilteringOperand,
+    IgxGridComponent,
+    IgxNumberFilteringOperand,
+    NoopFilteringStrategy,
+    NoopSortingStrategy
+} from 'igniteui-angular';
+import { Subject } from 'rxjs';
+import { debounceTime, takeUntil } from 'rxjs/operators';
+import { RemoteFilteringService } from '../../services/remoteFiltering.service';
+
+const DEBOUNCE_TIME = 300;
+
+@Component({
+    providers: [RemoteFilteringService],
+    selector: 'app-advanced-remote-filtering-sample',
+    styleUrls: ['./advanced-remote-filtering-sample.component.scss'],
+    templateUrl: './advanced-remote-filtering-sample.component.html'
+})
+export class AdvancedRemoteFilteringSampleComponent implements OnInit, AfterViewInit, OnDestroy {
+    @ViewChild('grid', { static: true }) public grid: IgxGridComponent;
+    public remoteData: any;
+    public noopFilterStrategy = NoopFilteringStrategy.instance();
+    public noopSortStrategy = NoopSortingStrategy.instance();
+
+    private _prevRequest: any;
+    private destroy$ = new Subject<void>();
+
+    public gridExpressionsTree: IFilteringExpressionsTree;
+
+
+    constructor(private _remoteService: RemoteFilteringService, public cdr: ChangeDetectorRef) {
+        this._remoteService.entity = "Orders";
+    }
+
+    public ngOnInit(): void {
+        this.remoteData = this._remoteService.remoteData;
+        const freightFE = new FilteringExpressionsTree(FilteringLogic.And, 'Freight');
+        freightFE.filteringOperands = [
+            {
+                condition: IgxNumberFilteringOperand.instance().condition('greaterThan'),
+                searchVal: 20,
+                fieldName: 'Freight'
+            },
+            {
+                condition: IgxNumberFilteringOperand.instance().condition('lessThan'),
+                searchVal: 50,
+                fieldName: 'Freight'
+            }
+        ]
+        const orderDateFE = new FilteringExpressionsTree(FilteringLogic.And, 'OrderDate');
+        orderDateFE.filteringOperands = [
+            {
+                condition: IgxDateFilteringOperand.instance().condition('after'),
+                searchVal: new Date('1996-07-04T00:00:00Z'),
+                fieldName: 'OrderDate'
+            },
+            {
+                condition: IgxDateFilteringOperand.instance().condition('before'),
+                searchVal: new Date('1996-07-15T00:00:00Z'),
+                fieldName: 'OrderDate'
+            }
+        ]
+
+        this.gridExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
+        this.gridExpressionsTree.filteringOperands = [
+            freightFE,
+            orderDateFE
+        ]
+    }
+
+    public ngAfterViewInit() {
+        const sortingExpr = this.grid.sortingExpressions[0];
+
+        this.grid.isLoading = true;
+
+        this._remoteService.getData(
+            this.grid.advancedFilteringExpressionsTree,
+            sortingExpr,
+            () => {
+                this.grid.isLoading = false;
+            });
+
+        this.grid.sortingExpressionsChange.pipe(
+            debounceTime(DEBOUNCE_TIME),
+            takeUntil(this.destroy$)
+        ).subscribe(() => {
+            this.processData();
+        });
+
+        this.grid.advancedFilteringExpressionsTreeChange.pipe(
+            debounceTime(DEBOUNCE_TIME),
+            takeUntil(this.destroy$)
+        ).subscribe(() => {
+            this.processData();
+        });
+    }
+
+    public processData() {
+        if (this._prevRequest) {
+            this._prevRequest.unsubscribe();
+        }
+
+        if (!this.grid.isLoading) {
+            this.grid.isLoading = true;
+        }
+
+        const filteringExpr = this.grid.advancedFilteringExpressionsTree;
+        const sortingExpr = this.grid.sortingExpressions[0];
+
+        this._prevRequest = this._remoteService.getData(
+            filteringExpr,
+            sortingExpr,
+            () => {
+                if (this.grid.isLoading) {
+                    this.grid.isLoading = false;
+                }
+            });
+    }
+
+    public formatNumber(value: number) {
+        return value.toFixed(2);
+    }
+
+    public formatCurrency(value: number) {
+        return '$' + value.toFixed(2);
+    }
+
+    public ngOnDestroy() {
+        if (this._prevRequest) {
+            this._prevRequest.unsubscribe();
+        }
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+}

src/app/grid/grid-routes-data.ts

@@ -125,5 +125,6 @@ export const gridsRoutesData = {
     'grid-validator-service-extended': { displayName: 'Grid Validator Service Extended', parentName: 'Grid'},
     'grid-summary-export': { displayName: 'Grid Summary Export', parentName: 'Grid'},
     'grid-state-persistence': { displayName: 'Grid State Persistence', parentName: 'Grid'},
-    'grid-cascading-combos': { displayName: 'Grid Editing with Cascading Combos', parentName: 'Grid'}
+    'grid-cascading-combos': { displayName: 'Grid Editing with Cascading Combos', parentName: 'Grid'},
+    'grid-advanced-remote-filtering': { displayName: 'Grid Advanced Remote Filtering', parentName: 'Grid'},
 };

src/app/grid/grids-routing.module.ts

@@ -87,6 +87,7 @@ import { GridColumnSelectionComponent } from './column-selection-sample/column-s
 import { GridColumnSelectionStylesComponent } from './column-selection-styles/column-selection-styles.component';
 import { CustomGridPagingStyleSampleComponent } from './custom-grid-paging-style/custom-grid-paging-style.component';
 import { GridActionStripSampleComponent } from './grid-action-strip/grid-action-strip-sample';
+import { AdvancedRemoteFilteringSampleComponent } from './grid-advanced-remote-filtering-sample/advanced-remote-filtering-sample.component';
 import { GridAdvancedFilteringSampleComponent } from './grid-advanced-filtering-sample/grid-advanced-filtering-sample.component';
 import { GridColumnDataTypesSampleComponent } from './grid-column-data-types-sample/grid-column-data-types-sample.component';
 import { GridAdvancedFilteringStyleComponent } from './grid-advanced-filtering-style/grid-advanced-filtering-style.component';
@@ -759,6 +760,11 @@ export const gridsRoutes: Routes = [
         component: GridCascadingCombosComponent,
         data: gridsRoutesData['grid-cascading-combos'],
         path: 'grid-cascading-combos'
+    },
+    {
+        component: AdvancedRemoteFilteringSampleComponent,
+        data: gridsRoutesData['advanced-remote-filtering'],
+        path: 'grid-advanced-remote-filtering'
     }
 ];
 

src/app/grid/grids.module.ts

@@ -19,6 +19,7 @@ import { GridColumnSelectionComponent } from './column-selection-sample/column-s
 import { GridColumnSelectionStylesComponent } from './column-selection-styles/column-selection-styles.component';
 import { CustomGridPagingStyleSampleComponent } from './custom-grid-paging-style/custom-grid-paging-style.component';
 import { GridActionStripSampleComponent } from './grid-action-strip/grid-action-strip-sample';
+import { AdvancedRemoteFilteringSampleComponent } from './grid-advanced-remote-filtering-sample/advanced-remote-filtering-sample.component';
 import { GridAdvancedFilteringSampleComponent } from './grid-advanced-filtering-sample/grid-advanced-filtering-sample.component';
 import { GridAdvancedFilteringStyleComponent } from './grid-advanced-filtering-style/grid-advanced-filtering-style.component';
 import { GridAllDataSummaryComponent } from './grid-allData-summary/grid-allData-summary.component';
@@ -144,6 +145,7 @@ import { GridStatePersistenceSampleComponent } from './grid-state-persistence-sa
 import { GridCascadingCombosComponent } from './grid-cascading-combos/grid-cascading-combos.component';
 
 @NgModule({ declarations: [
+        AdvancedRemoteFilteringSampleComponent,
         GridBatchEditingSampleComponent,
         GridActionStripSampleComponent,
         GridColumnHidingSampleComponent,