Merge pull request #2464 from IgniteUI/ddimitrov/formattedFilteringStrategy

DiyanDimitrov · web-flow · commit 991cf08e2e66 · 2021-02-16T17:40:46.000+02:00
Add Formatted Filtering Strategy Samples
diff --git a/live-editing/configs/GridConfigGenerator.ts b/live-editing/configs/GridConfigGenerator.ts
@@ -1234,6 +1234,16 @@ export class GridConfigGenerator implements IConfigGenerator {
             })
         }));
 
+        configs.push(new Config({
+            component: 'GridFormattedFilteringStrategyComponent',
+            additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/src/app/data/nwindData.ts"],
+            appModuleConfig: new AppModuleConfig({
+                imports: ['GridFormattedFilteringStrategyComponent', 'IgxGridModule', 'IgxPreventDocumentScrollModule'],
+                ngDeclarations: ['GridFormattedFilteringStrategyComponent'],
+                ngImports: ['IgxPreventDocumentScrollModule', 'IgxGridModule']
+            })
+        }));
+
         return configs;
     }
 }
diff --git a/live-editing/configs/HierarchicalGridConfigGenerator.ts b/live-editing/configs/HierarchicalGridConfigGenerator.ts
@@ -719,15 +719,15 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator {
 
         const hGridSaveStateSampleConfig = new Config({
             additionalFiles: [
-            "/src/app/directives/prevent-scroll.directive.ts", 
+            "/src/app/directives/prevent-scroll.directive.ts",
             "/src/app/hierarchical-grid/data.ts",
             "/src/app/hierarchical-grid/hierarchical-grid-save-state/about.component.ts",
             "/src/app/hierarchical-grid/hierarchical-grid-save-state/about.component.html"
             ],
             appModuleConfig: new AppModuleConfig({
                 imports: ['IgxHierarchicalGridModule', 'HGridSaveStateComponent', 'HGridAboutComponent', 'IgxPreventDocumentScrollModule', 'Router', 'RouterModule'],
                 ngDeclarations: ['HGridSaveStateComponent', 'HGridAboutComponent'],
-                ngImports: ['IgxPreventDocumentScrollModule', 'IgxHierarchicalGridModule', 
+                ngImports: ['IgxPreventDocumentScrollModule', 'IgxHierarchicalGridModule',
                     "RouterModule.forRoot([\{component: HGridAboutComponent, path: 'hGrid-state-about'},\{component: HGridSaveStateComponent, path: 'hGrid-state'},\{ path: '', redirectTo: '/hGrid-state', pathMatch: 'full' }])"]
             }),
             component: 'HGridSaveStateComponent'
@@ -781,6 +781,17 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator {
             component: 'HGridAddRowSampleComponent'
         }));
 
+        configs.push(new Config({
+            additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/src/app/hierarchical-grid/data.ts"],
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxHierarchicalGridModule', 'HGridFormattedFilteringStrategyComponent', 'IgxPreventDocumentScrollModule'],
+                ngDeclarations: ['HGridFormattedFilteringStrategyComponent'],
+                ngImports: ['IgxPreventDocumentScrollModule', 'IgxHierarchicalGridModule']
+            }),
+            component: 'HGridFormattedFilteringStrategyComponent'
+        }));
+
+
         return configs;
     }
 }
diff --git a/live-editing/configs/TreeGridConfigGenerator.ts b/live-editing/configs/TreeGridConfigGenerator.ts
@@ -1004,6 +1004,17 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/tree-grid/"
         }));
 
+        configs.push(new Config({
+            additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/src/app/tree-grid/data/foods.ts"],
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'TreeGridFormattedFilteringStrategyComponent'],
+                ngDeclarations: ['TreeGridFormattedFilteringStrategyComponent'],
+                ngImports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule']
+            }),
+            component: 'TreeGridFormattedFilteringStrategyComponent',
+            shortenComponentPathBy: "/tree-grid/"
+        }));
+
         return configs;
     }
 }
diff --git a/src/app/grid/grid-formatted-filtering-strategy/grid-formatted-filtering-strategy.component.html b/src/app/grid/grid-formatted-filtering-strategy/grid-formatted-filtering-strategy.component.html
@@ -0,0 +1,19 @@
+<div class="grid__wrapper">
+    <igx-grid igxPreventDocumentScroll #grid1 [data]="data" [autoGenerate]="false" height="600px" width="100%"
+        [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [filterStrategy]="filterStrategy">
+        <igx-column field="ProductName" header="Product Name" [sortable]="true" [disableHiding]="true" [dataType]="'string'">
+        </igx-column>
+        <igx-column field="QuantityPerUnit" header="Quantity Per Unit" [sortable]="true" [disableHiding]="true" [dataType]="'string'">
+        </igx-column>
+        <igx-column field="UnitPrice" header="Unit Price Category" [sortable]="true" [disableHiding]="true" dataType="string" [formatter]="formatPrice">
+        </igx-column>
+        <igx-column field="OrderDate" header="Order Date" [sortable]="true" [disableHiding]="true" [dataType]="'date'">
+        </igx-column>
+        <igx-column field="Discontinued" header="Discontinued" [sortable]="true" [disableHiding]="true" [dataType]="'boolean'">
+            <ng-template igxCell let-cell="cell" let-val>
+                <img *ngIf="val" src="assets/images/grid/active.png" title="Continued" alt="Continued" />
+                <img *ngIf="!val" src="assets/images/grid/expired.png" title="Discontinued" alt="Discontinued" />
+            </ng-template>
+        </igx-column>
+    </igx-grid>
+</div>
diff --git a/src/app/grid/grid-formatted-filtering-strategy/grid-formatted-filtering-strategy.component.scss b/src/app/grid/grid-formatted-filtering-strategy/grid-formatted-filtering-strategy.component.scss
@@ -0,0 +1,3 @@
+.grid__wrapper {
+    margin: 16px;
+}
diff --git a/src/app/grid/grid-formatted-filtering-strategy/grid-formatted-filtering-strategy.component.ts b/src/app/grid/grid-formatted-filtering-strategy/grid-formatted-filtering-strategy.component.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit, ViewChild } from "@angular/core";
+import { IgxGridComponent, FormattedValuesFilteringStrategy } from "igniteui-angular";
+import { DATA } from "../../data/nwindData";
+
+@Component({
+    selector: "grid-sample",
+    styleUrls: ["./grid-formatted-filtering-strategy.component.scss"],
+    templateUrl: "grid-formatted-filtering-strategy.component.html"
+})
+export class GridFormattedFilteringStrategyComponent implements OnInit {
+    @ViewChild("grid1", { read: IgxGridComponent, static: true })
+    public grid1: IgxGridComponent;
+
+    public data: any[];
+    public filterStrategy = new FormattedValuesFilteringStrategy();
+
+    public ngOnInit(): void {
+        this.data = DATA;
+    }
+
+    public formatPrice(value: number) {
+        return value < 15 ? 'low' : value > 50 ? 'high' : 'medium';
+    }
+}
diff --git a/src/app/grid/grid-routes-data.ts b/src/app/grid/grid-routes-data.ts
@@ -107,5 +107,6 @@ export const gridsRoutesData = {
     "grid-sorting-indicators": {displayName: "Grid Sorting Indicators", parentName: "Grid"},
     "exporting-visualization": {displayName: "Exporting Visualization", parentName: "Grid"},
     "grid-editing-lifecycle": {displayName: "Grid editing lifecycle", parentName: "Grid"},
-    "grid-select": {displayName: "Grid with Select as Editor Provider", parentName: "Grid"}
+    "grid-select": {displayName: "Grid with Select as Editor Provider", parentName: "Grid"},
+    "grid-formatted-filtering-strategy": { displayName: "Grid Formatted Filtering Strategy", parentName: "Grid" }
 };
diff --git a/src/app/grid/grids-routing.module.ts b/src/app/grid/grids-routing.module.ts
@@ -112,6 +112,7 @@ import {
 import { GridSortingIndicatorsComponent } from './grid-sorting-indicators/grid-sorting-indicators.component';
 import { GridExportVisualizationComponent } from "./grid-export-visualization/grid-export-visualization.component";
 import { GridSelectComponent } from './grid-select/grid-select-sample.component'
+import { GridFormattedFilteringStrategyComponent } from "./grid-formatted-filtering-strategy/grid-formatted-filtering-strategy.component";
 // tslint:enable:max-line-length
 
 export const gridsRoutes: Routes = [
@@ -644,6 +645,11 @@ export const gridsRoutes: Routes = [
         component: GridSelectComponent,
         data: gridsRoutesData["grid-select"],
         path: "grid-select"
+    },
+    {
+        component: GridFormattedFilteringStrategyComponent,
+        data: gridsRoutesData["grid-formatted-filtering-strategy"],
+        path: "grid-formatted-filtering-strategy"
     }
 ];
 
diff --git a/src/app/grid/grids.module.ts b/src/app/grid/grids.module.ts
@@ -121,6 +121,7 @@ import { GridMultiColumnHeadersComponent } from "./multi-column-headers/multi-co
 import { GridSortingIndicatorsComponent } from './grid-sorting-indicators/grid-sorting-indicators.component';
 import { GridExportVisualizationComponent } from './grid-export-visualization/grid-export-visualization.component';
 import {GridSelectComponent} from './grid-select/grid-select-sample.component';
+import { GridFormattedFilteringStrategyComponent } from "./grid-formatted-filtering-strategy/grid-formatted-filtering-strategy.component";
 
 @NgModule({
     declarations: [
@@ -232,7 +233,8 @@ import {GridSelectComponent} from './grid-select/grid-select-sample.component';
         GridSortingIndicatorsComponent,
         GridExportVisualizationComponent,
         GridEditingLifecycleComponent,
-        GridSelectComponent
+        GridSelectComponent,
+        GridFormattedFilteringStrategyComponent
     ],
     imports: [
         CommonModule,
diff --git a/src/app/hierarchical-grid/hierarchical-grid-formatted-filtering-strategy/hierarchical-grid-formatted-filtering-strategy.component.html b/src/app/hierarchical-grid/hierarchical-grid-formatted-filtering-strategy/hierarchical-grid-formatted-filtering-strategy.component.html
@@ -0,0 +1,30 @@
+<div class="wrapper">
+    <igx-hierarchical-grid igxPreventDocumentScroll  class="hgrid" [data]="localdata" [autoGenerate]="false"
+        [allowFiltering]='true' filterMode="excelStyleFilter" [filterStrategy]="filterStrategy"
+        height="600px" [width]="'100%'" #hierarchicalGrid>
+        <igx-column field="Artist" [sortable]="true" [disableHiding]="true"></igx-column>
+        <igx-column field="Debut" header="Debut Decade" [sortable]="true" [disableHiding]="true" [formatter]="decadeFormatter"></igx-column>
+        <igx-column field="GrammyNominations" header="Grammy Nominations" dataType="number" [sortable]="true" [disableHiding]="true"></igx-column>
+        <igx-column field="GrammyAwards" header="Grammy Awards" dataType="number" [sortable]="true" [disableHiding]="true"></igx-column>
+
+        <igx-row-island [key]="'Albums'" [autoGenerate]="false" [allowFiltering]='true' filterMode="excelStyleFilter">
+            <igx-column field="Album" [sortable]="true" [disableHiding]="true"></igx-column>
+            <igx-column field="LaunchDate" header="Launch Date" [sortable]="true" [disableHiding]="true" [dataType]="'date'"></igx-column>
+            <igx-column field="BillboardReview" header="Billboard Review" [sortable]="true" [disableHiding]="true" dataType="number"></igx-column>
+            <igx-column field="USBillboard200" header="US Billboard 200" [sortable]="true" [disableHiding]="true" dataType="number"></igx-column>
+        <igx-row-island [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 [key]="'Tours'" [autoGenerate]="false">
+            <igx-column field="Tour"></igx-column>
+            <igx-column field="StartedOn" header="Started on"></igx-column>
+            <igx-column field="Location"></igx-column>
+            <igx-column field="Headliner"></igx-column>
+        </igx-row-island>
+    </igx-hierarchical-grid>
+</div>
diff --git a/src/app/hierarchical-grid/hierarchical-grid-formatted-filtering-strategy/hierarchical-grid-formatted-filtering-strategy.component.scss b/src/app/hierarchical-grid/hierarchical-grid-formatted-filtering-strategy/hierarchical-grid-formatted-filtering-strategy.component.scss
@@ -0,0 +1,3 @@
+.wrapper {
+    margin: 16px;
+}
diff --git a/src/app/hierarchical-grid/hierarchical-grid-formatted-filtering-strategy/hierarchical-grid-formatted-filtering-strategy.component.ts b/src/app/hierarchical-grid/hierarchical-grid-formatted-filtering-strategy/hierarchical-grid-formatted-filtering-strategy.component.ts
@@ -0,0 +1,24 @@
+import { Component, ViewChild } from "@angular/core";
+import { IgxHierarchicalGridComponent, FormattedValuesFilteringStrategy } from "igniteui-angular";
+import { SINGERS } from "../data";
+
+@Component({
+    selector: "hierarchical-grid-formatted-filtering-strategy",
+    styleUrls: ["./hierarchical-grid-formatted-filtering-strategy.component.scss"],
+    templateUrl: "hierarchical-grid-formatted-filtering-strategy.component.html"
+})
+
+export class HGridFormattedFilteringStrategyComponent {
+
+    @ViewChild("hierarchicalGrid", { static: true })
+    public hierarchicalGrid: IgxHierarchicalGridComponent;
+
+    public localdata;
+    public filterStrategy = new FormattedValuesFilteringStrategy();
+
+    constructor() {
+        this.localdata = SINGERS;
+    }
+
+    public decadeFormatter = (value: number) => Math.floor(value / 10) * 10 + 's';
+}
diff --git a/src/app/hierarchical-grid/hierarchical-grid-routes-data.ts b/src/app/hierarchical-grid/hierarchical-grid-routes-data.ts
@@ -70,5 +70,6 @@ export const hierarchicalGridRoutesData = {
     "hGrid-state": { displayName: "HGrid Save State", parentName: "Hierarchical Grid" },
     "hGrid-state-about": { displayName: "HGrid About", parentName: "Hierarchical Grid" },
     "hGrid-editing-lifecycle": { displayName: "Hierarchical Grid Editing lifecycle", parentName: "Hierarchical Grid" },
-    "hGrid-cell-selection": {displayName: "HGrid Cell Selection", parentName: "Hierarchical Grid"}
+    "hGrid-cell-selection": {displayName: "HGrid Cell Selection", parentName: "Hierarchical Grid"},
+    "hGrid-formatted-filtering-strategy": { displayName: "HGrid Formatted Filtering Strategy", parentName: "Hierarchical Grid" }
 };
diff --git a/src/app/hierarchical-grid/hierarchical-grid-routing.module.ts b/src/app/hierarchical-grid/hierarchical-grid-routing.module.ts
@@ -87,6 +87,7 @@ import { HGridAboutComponent } from "./hierarchical-grid-save-state/about.compon
 import { HierarchicalGridExternalOutletComponent } from "./hierarchical-grid-external-outlet/hierarchical-grid-external-outlet-sample.component";
 import { HGridEditingLifecycleComponent } from "./hgrid-editing-lifecycle-sample/hgrid-editing-lifecycle.component";
 import { HierarchicalGridCellSelectionComponent } from './hierarchical-grid-cellSelection-sample/hierarchical-grid-cellSelection.component';
+import { HGridFormattedFilteringStrategyComponent } from "./hierarchical-grid-formatted-filtering-strategy/hierarchical-grid-formatted-filtering-strategy.component";
 
 export const hierarchicalGridRoutes: Routes = [
     {
@@ -484,6 +485,11 @@ export const hierarchicalGridRoutes: Routes = [
         component: HierarchicalGridCellSelectionComponent,
         data: hierarchicalGridRoutesData["hGrid-cell-selection"],
         path: "hGrid-cell-selection"
+    },
+    {
+        component: HGridFormattedFilteringStrategyComponent,
+        data: hierarchicalGridRoutesData["hGrid-formatted-filtering-strategy"],
+        path: "hGrid-formatted-filtering-strategy"
     }
 ];
 
diff --git a/src/app/hierarchical-grid/hierarchical-grid.module.ts b/src/app/hierarchical-grid/hierarchical-grid.module.ts
@@ -82,6 +82,7 @@ import { HGridAboutComponent } from "./hierarchical-grid-save-state/about.compon
 import { HierarchicalGridExternalOutletComponent } from './hierarchical-grid-external-outlet/hierarchical-grid-external-outlet-sample.component';
 import { HGridEditingLifecycleComponent } from "./hgrid-editing-lifecycle-sample/hgrid-editing-lifecycle.component";
 import { HierarchicalGridCellSelectionComponent } from './hierarchical-grid-cellSelection-sample/hierarchical-grid-cellSelection.component';
+import { HGridFormattedFilteringStrategyComponent } from "./hierarchical-grid-formatted-filtering-strategy/hierarchical-grid-formatted-filtering-strategy.component";
 
 @NgModule({
     declarations: [
@@ -157,7 +158,8 @@ import { HierarchicalGridCellSelectionComponent } from './hierarchical-grid-cell
         HGridKeyboardnavGuide,
         HGridRemotePagingDefaultTemplateComponent,
         HGridEditingLifecycleComponent,
-        HierarchicalGridCellSelectionComponent
+        HierarchicalGridCellSelectionComponent,
+        HGridFormattedFilteringStrategyComponent
     ],
     imports: [
         CommonModule,
diff --git a/src/app/tree-grid/tree-grid-formatted-filtering-strategy/tree-grid-formatted-filtering-strategy.component.html b/src/app/tree-grid/tree-grid-formatted-filtering-strategy/tree-grid-formatted-filtering-strategy.component.html
@@ -0,0 +1,22 @@
+<div class="grid__wrapper">
+    <igx-tree-grid igxPreventDocumentScroll  #treegrid1 [data]="data" [autoGenerate]="false" height="600px" width="100%"
+        [allowFiltering]="true" filterMode="excelStyleFilter" [filterStrategy]="filterStrategy"
+        primaryKey="ID" foreignKey="ParentID">
+
+        <igx-column field="ID" header="Product ID" [dataType]="'string'" [sortable]="true" [disableHiding]="true">
+        </igx-column>
+        <igx-column field="Name" header="Product Name" [dataType]="'string'" [sortable]="true" [disableHiding]="true">
+        </igx-column>
+        <igx-column field="UnitPrice" header="Unit Price Category" dataType="string" [sortable]="true" [disableHiding]="true" [formatter]="formatPrice">
+        </igx-column>
+        <igx-column field="AddedDate" header="Added Date" [dataType]="'date'" [sortable]="true" [disableHiding]="true">
+        </igx-column>
+        <igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" [sortable]="true" [disableHiding]="true">
+            <ng-template igxCell let-cell="cell" let-val>
+                <span *ngIf="cell.row.rowData.UnitPrice == 0">-</span>
+                <img *ngIf="cell.row.rowData.UnitPrice != 0 && val" src="assets/images/grid/active.png" title="Continued" alt="Continued" />
+                <img *ngIf="cell.row.rowData.UnitPrice != 0 && !val" src="assets/images/grid/expired.png" title="Discontinued" alt="Discontinued" />
+            </ng-template>
+        </igx-column>
+    </igx-tree-grid>
+</div>
diff --git a/src/app/tree-grid/tree-grid-formatted-filtering-strategy/tree-grid-formatted-filtering-strategy.component.scss b/src/app/tree-grid/tree-grid-formatted-filtering-strategy/tree-grid-formatted-filtering-strategy.component.scss
@@ -0,0 +1,3 @@
+.grid__wrapper {
+    margin: 16px;
+}
diff --git a/src/app/tree-grid/tree-grid-formatted-filtering-strategy/tree-grid-formatted-filtering-strategy.component.ts b/src/app/tree-grid/tree-grid-formatted-filtering-strategy/tree-grid-formatted-filtering-strategy.component.ts
@@ -0,0 +1,25 @@
+import { Component, OnInit, ViewChild } from "@angular/core";
+import { IgxTreeGridComponent, TreeGridFormattedValuesFilteringStrategy } from "igniteui-angular";
+import { FOODS_DATA } from "../data/foods";
+
+@Component({
+    selector: "tree-grid-formatted-filtering-strategy",
+    styleUrls: ["./tree-grid-formatted-filtering-strategy.component.scss"],
+    templateUrl: "tree-grid-formatted-filtering-strategy.component.html"
+})
+
+export class TreeGridFormattedFilteringStrategyComponent implements OnInit {
+    @ViewChild("treegrid1", { read: IgxTreeGridComponent, static: true })
+    public treegrid1: IgxTreeGridComponent;
+
+    public data: any[];
+    public filterStrategy = new TreeGridFormattedValuesFilteringStrategy();
+
+    public ngOnInit(): void {
+        this.data = FOODS_DATA();
+    }
+
+    public formatPrice(value: number) {
+        return value ? value < 15 ? 'low' : value > 50 ? 'high' : 'medium' : '';
+    }
+}
diff --git a/src/app/tree-grid/tree-grid-routes-data.ts b/src/app/tree-grid/tree-grid-routes-data.ts
@@ -108,5 +108,6 @@ export const treeGridRoutesData = {
     "tree-grid-state": { displayName: "TreeGrid Save State", parentName: "TreeGrid" },
     "tree-grid-state-about": { displayName: "About", parentName: "TreeGrid" },
     "tree-grid-exporting-visualization": { displayName: "Exporting Visualization", parentName: "TreeGrid" },
-    "tree-grid-editing-lifecycle": { displayName: "Editing Lifecycle", parentName: "TreeGrid" }
+    "tree-grid-editing-lifecycle": { displayName: "Editing Lifecycle", parentName: "TreeGrid" },
+    "tree-grid-formatted-filtering-strategy": { displayName: "TreeGrid Formatted Filtering Strategy", parentName: "TreeGrid" }
 };
diff --git a/src/app/tree-grid/tree-grid-routing.module.ts b/src/app/tree-grid/tree-grid-routing.module.ts
@@ -84,6 +84,7 @@ import { TGridAboutComponent } from "./tree-grid-save-state/about.component";
 import { TreeGridExternalOutletComponent } from "./tree-grid-external-outlet/tree-grid-external-outlet-sample.component";
 import { TreeGridExportVisualizationComponent } from "./tree-grid-export-visualization/tree-grid-export-visualization.component";
 import { TGridEditingLifecycleComponent } from "./tgrid-editing-lifecycle-sample/tgrid-editing-lifecycle.component";
+import { TreeGridFormattedFilteringStrategyComponent } from "./tree-grid-formatted-filtering-strategy/tree-grid-formatted-filtering-strategy.component";
 export const treeGridRoutes: Routes = [
     {
         component: TreeGridRowEditSampleComponent,
@@ -494,6 +495,11 @@ export const treeGridRoutes: Routes = [
         component: TGridEditingLifecycleComponent,
         data: treeGridRoutesData["tree-grid-editing-lifecycle"],
         path: "tree-grid-editing-lifecycle"
+    },
+    {
+        component: TreeGridFormattedFilteringStrategyComponent,
+        data: treeGridRoutesData["tree-grid-formatted-filtering-strategy"],
+        path: "tree-grid-formatted-filtering-strategy"
     }
 ];
 
diff --git a/src/app/tree-grid/tree-grid.module.ts b/src/app/tree-grid/tree-grid.module.ts
@@ -113,6 +113,7 @@ import { TGridAboutComponent } from "./tree-grid-save-state/about.component";
 import { TreeGridExternalOutletComponent } from './tree-grid-external-outlet/tree-grid-external-outlet-sample.component';
 import { TreeGridExportVisualizationComponent } from './tree-grid-export-visualization/tree-grid-export-visualization.component';
 import { TGridEditingLifecycleComponent } from "./tgrid-editing-lifecycle-sample/tgrid-editing-lifecycle.component";
+import { TreeGridFormattedFilteringStrategyComponent } from "./tree-grid-formatted-filtering-strategy/tree-grid-formatted-filtering-strategy.component";
 
 @NgModule({
     declarations: [
@@ -199,7 +200,8 @@ import { TGridEditingLifecycleComponent } from "./tgrid-editing-lifecycle-sample
         TreeGridRemotePagingDefaultTemplateComponent,
         TreeGridExternalOutletComponent,
         TreeGridExportVisualizationComponent,
-        TGridEditingLifecycleComponent
+        TGridEditingLifecycleComponent,
+        TreeGridFormattedFilteringStrategyComponent
     ],
     imports: [
         CommonModule,

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.grid__wrapper {`
	`2`	`+ margin: 16px;`
	`3`	`+}`