chore(filtering): add external filtering sample #5878

IgniteUI · Oct 22, 2019 · 1ebed30 · 1ebed30
1 parent 0959551
commit 1ebed30
Show file tree

Hide file tree

Showing 6 changed files with 671 additions and 1 deletion.
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -268,6 +268,11 @@ export class AppComponent implements OnInit {
             icon: 'view_column',
             name: 'Grid Filtering'
         },
+        {
+            link: '/gridExternalFiltering',
+            icon: 'view_column',
+            name: 'Grid External Filtering'
+        },
         {
             link: '/icon',
             icon: 'android',

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -111,6 +111,7 @@ import { GridAutoSizeSampleComponent } from './grid-auto-size/grid-auto-size.sam
 import { GridFlexSampleComponent } from './grid-flex-layout/grid-flex.sample';
 import { GridEsfLoadOnDemandComponent } from './grid-esf-load-on-demand/grid-esf-load-on-demand.component';
 import { GridFilteringComponent } from './grid-filtering/grid-filtering.sample';
+import { GridExternalFilteringComponent } from './grid-external-filtering/grid-external-filtering.sample';
 
 
 
@@ -214,7 +215,8 @@ const components = [
     GridAutoSizeSampleComponent,
     GridFlexSampleComponent,
     GridEsfLoadOnDemandComponent,
-    GridFilteringComponent
+    GridFilteringComponent,
+    GridExternalFilteringComponent
 ];
 
 @NgModule({

diff --git a/src/app/grid-external-filtering/grid-external-filtering.sample.css b/src/app/grid-external-filtering/grid-external-filtering.sample.css
@@ -0,0 +1,17 @@
+.density-chooser {
+    margin-bottom: 16px;
+    max-width: 900px;
+}
+
+.sample-buttons {
+    margin-top: 24px;
+    display: flex;
+}
+
+igx-checkbox {
+    margin: 0px 10px; 
+}
+
+[igxButton]+[igxButton] {
+    margin-left: 8px;
+}
diff --git a/src/app/grid-external-filtering/grid-external-filtering.sample.html b/src/app/grid-external-filtering/grid-external-filtering.sample.html
@@ -0,0 +1,80 @@
+<div class="wrapper">
+    <app-page-header title="Grid External Filtering">
+        Demonstrates how to host Excel Style and Advanced filtering components outside of the grid.
+    </app-page-header>
+
+    <div class="sample-content">
+        <div class="sample-column">
+            <div class="density-chooser">
+                <igx-buttongroup [values]="displayDensities" (onSelect)="selectDensity($event)"></igx-buttongroup>
+            </div>
+
+            <div style="display: flex;">
+                <div style="display: flex; flex-flow: column;">
+                    <igx-select #columnSelect value="ID">
+                        <label igxLabel>Column</label>
+                        <igx-select-item *ngFor="let column of columns" [value]="column.field">
+                            {{column.field}}
+                        </igx-select-item>
+                    </igx-select>
+                    <igx-grid-excel-style-filtering 
+                        [column]="grid1.getColumnByName(columnSelect.value)">
+                    </igx-grid-excel-style-filtering>
+                </div>
+                <div style="display: flex; flex-flow: column;">
+                    <igx-grid
+                        #grid1
+                        [data]="data"
+                        [displayDensity]="density"
+                        [allowFiltering]="false"
+                        [filterMode]="'excelStyleFilter'"
+                        [allowAdvancedFiltering]="false"
+                        [rowSelectable]="true"
+                        [paging]="false"
+                        [width]="'980px'"
+                        [height]="'410px'" 
+                        [showToolbar]="true"
+                        [columnHiding]="true" 
+                        [columnPinning]="true"
+                        [exportExcel]="true" 
+                        [exportCsv]="true" 
+                        exportText="Export"
+                        exportExcelText="Export to Excel" 
+                        exportCsvText="Export to CSV">
+                        <igx-column *ngFor="let c of columns" 
+                            [field]="c.field"
+                            [header]="c.field"
+                            [movable]="c.movable"
+                            [groupable]="true"
+                            [resizable]="c.resizable"
+                            [width]="c.width"
+                            [sortable]="true"
+                            [filterable]="true"
+                            [editable]="true"
+                            [hidden]="c.hidden"
+                            [minWidth]="c.minWidth"
+                            [maxWidth]="c.maxWidth"
+                            [dataType]="c.type">
+                        </igx-column>
+                    </igx-grid>
+
+                    <igx-advanced-filtering-dialog
+                        [grid]="grid1">
+                    </igx-advanced-filtering-dialog>
+                </div>
+            </div>
+
+            <div class="sample-buttons">
+                <igx-checkbox [checked]="grid1.allowFiltering" (change)="onAllowFilteringChanged($event)">Allow Filtering</igx-checkbox>
+                <igx-buttongroup [multiSelection]="false" [values]="filterModes" (onSelect)="selectFilterMode($event)"></igx-buttongroup>
+            </div>
+            <div class="sample-buttons">
+                <igx-checkbox [(ngModel)]="grid1.allowAdvancedFiltering">Allow Advanced Filtering</igx-checkbox>
+                <button igxButton="raised" (click)="openAdvancedFiltering()">Open Advanced Filtering</button>
+                <button igxButton="raised" (click)="closeAdvancedFiltering()">Close Advanced Filtering</button>
+                <igx-checkbox #applyChangesCheckbox checked="true">Apply Changes</igx-checkbox>
+                <button igxButton="raised" (click)="clearAdvancedFiltering()">Clear Advanced Filtering</button>
+            </div>
+        </div>
+    </div>
+</div>