@@ -933,6 +935,32 @@ export class IgxGridFilteringComponent extends BasicGridComponent {
}
}
+@Component({
+ template: `
+
+
+
+
+
+
+ `
+})
+export class IgxGridFilteringESFLoadOnDemandComponent extends BasicGridComponent {
+ private _filteringStrategy = new FilteringStrategy();
+ public data = SampleTestData.excelFilteringData();
+
+ public columnValuesStrategy = (column: IgxColumnComponent,
+ columnExprTree: IFilteringExpressionsTree,
+ done: (uniqueValues: any[]) => void) => {
+ setTimeout(() => {
+ const filteredData = this._filteringStrategy.filter(this.data, columnExprTree);
+ const columnValues = filteredData.map(record => record[column.field]);
+ done(columnValues);
+ }, 1000);
+ }
+}
+
@Component({
template: `
- Sorting Template
- Hiding Template
- Moving Template
- Pinning Template
+ Sorting Template
+ Hiding Template
+ Moving Template
+ Pinning Template
`
})
export class IgxGridFilteringESFTemplatesComponent extends BasicGridComponent {
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 267a88a52dd..a0aff036f8a 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -173,6 +173,11 @@ export class AppComponent implements OnInit {
icon: 'view_column',
name: 'Grid Filter Template'
},
+ {
+ link: '/gridEsfLoadOnDemand',
+ icon: 'view_column',
+ name: 'Grid ESF Load On Demand'
+ },
{
link: '/gridColumnMoving',
icon: 'view_column',
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 9f92623bcac..00bf4f08bfb 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -106,6 +106,7 @@ import { GridFilterTemplateSampleComponent } from './grid-filter-template/grid-f
import { GridMRLConfigSampleComponent } from './grid-multi-row-layout-config/grid-mrl-config.sample';
import { GridMRLCustomNavigationSampleComponent } from './grid-mrl-custom-navigation/grid-mrl-custom-navigation';
import { GridClipboardSampleComponent } from './grid-clipboard/grid-clipboard.sample';
+import { GridEsfLoadOnDemandComponent } from './grid-esf-load-on-demand/grid-esf-load-on-demand.component';
@@ -204,7 +205,8 @@ const components = [
GridSearchBoxComponent,
GridSearchComponent,
GridFilterTemplateSampleComponent,
- GridClipboardSampleComponent
+ GridClipboardSampleComponent,
+ GridEsfLoadOnDemandComponent
];
@NgModule({
diff --git a/src/app/grid-esf-load-on-demand/grid-esf-load-on-demand.component.html b/src/app/grid-esf-load-on-demand/grid-esf-load-on-demand.component.html
new file mode 100644
index 00000000000..920b6c71b74
--- /dev/null
+++ b/src/app/grid-esf-load-on-demand/grid-esf-load-on-demand.component.html
@@ -0,0 +1,28 @@
+
+
+ Allows loading unique column values into the Excel Style Filtering on demand.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/grid-esf-load-on-demand/grid-esf-load-on-demand.component.scss b/src/app/grid-esf-load-on-demand/grid-esf-load-on-demand.component.scss
new file mode 100644
index 00000000000..7bb6f8bd0ba
--- /dev/null
+++ b/src/app/grid-esf-load-on-demand/grid-esf-load-on-demand.component.scss
@@ -0,0 +1,4 @@
+.density-chooser {
+ margin-bottom: 16px;
+ max-width: 900px;
+}
diff --git a/src/app/grid-esf-load-on-demand/grid-esf-load-on-demand.component.ts b/src/app/grid-esf-load-on-demand/grid-esf-load-on-demand.component.ts
new file mode 100644
index 00000000000..9dd61e08229
--- /dev/null
+++ b/src/app/grid-esf-load-on-demand/grid-esf-load-on-demand.component.ts
@@ -0,0 +1,41 @@
+import { Component, ViewChild, OnInit } from '@angular/core';
+import { IgxGridComponent, IgxColumnComponent, IFilteringExpressionsTree } from 'igniteui-angular';
+import { SAMPLE_DATA } from '../shared/sample-data';
+import { GridESFLoadOnDemandService } from './grid-esf-load-on-demand.service';
+
+@Component({
+ selector: 'app-grid-esf-load-on-demand',
+ templateUrl: './grid-esf-load-on-demand.component.html',
+ styleUrls: ['./grid-esf-load-on-demand.component.scss']
+})
+export class GridEsfLoadOnDemandComponent implements OnInit {
+
+ private esfService = new GridESFLoadOnDemandService();
+
+ public data: Array
;
+ public density = 'comfortable';
+ public displayDensities;
+
+ @ViewChild('grid1', { static: true })
+ public grid1: IgxGridComponent;
+
+ public columnValuesStrategy = (column: IgxColumnComponent,
+ columnExprTree: IFilteringExpressionsTree,
+ done: (uniqueValues: any[]) => void) => {
+ this.esfService.getColumnData(column, columnExprTree, uniqueValues => done(uniqueValues));
+ }
+
+ public ngOnInit(): void {
+ this.displayDensities = [
+ { label: 'comfortable', selected: this.density === 'comfortable', togglable: true },
+ { label: 'cosy', selected: this.density === 'cosy', togglable: true },
+ { label: 'compact', selected: this.density === 'compact', togglable: true }
+ ];
+
+ this.data = this.esfService.getRecordsData();
+ }
+
+ public selectDensity(event) {
+ this.density = this.displayDensities[event.index].label;
+ }
+}
diff --git a/src/app/grid-esf-load-on-demand/grid-esf-load-on-demand.service.ts b/src/app/grid-esf-load-on-demand/grid-esf-load-on-demand.service.ts
new file mode 100644
index 00000000000..7cb8441093d
--- /dev/null
+++ b/src/app/grid-esf-load-on-demand/grid-esf-load-on-demand.service.ts
@@ -0,0 +1,18 @@
+import { IgxColumnComponent, IFilteringExpressionsTree, FilteringStrategy } from 'igniteui-angular';
+import { SAMPLE_DATA } from '../shared/sample-data';
+
+export class GridESFLoadOnDemandService {
+ private _filteringStrategy = new FilteringStrategy();
+
+ public getRecordsData() {
+ return SAMPLE_DATA.slice(0);
+ }
+
+ public getColumnData(column: IgxColumnComponent, columnExprTree: IFilteringExpressionsTree, done: (colVals: any[]) => void) {
+ setTimeout(() => {
+ const filteredData = this._filteringStrategy.filter(this.getRecordsData(), columnExprTree);
+ const columnValues = filteredData.map(record => record[column.field]);
+ done(columnValues);
+ }, 1000);
+ }
+}
diff --git a/src/app/routing.ts b/src/app/routing.ts
index 6a2ac2e9a7a..daf39318f5a 100644
--- a/src/app/routing.ts
+++ b/src/app/routing.ts
@@ -84,6 +84,7 @@ import { GridFilterTemplateSampleComponent } from './grid-filter-template/grid-f
import { GridMRLConfigSampleComponent } from './grid-multi-row-layout-config/grid-mrl-config.sample';
import { GridMRLCustomNavigationSampleComponent } from './grid-mrl-custom-navigation/grid-mrl-custom-navigation';
import { GridClipboardSampleComponent } from './grid-clipboard/grid-clipboard.sample';
+import { GridEsfLoadOnDemandComponent } from './grid-esf-load-on-demand/grid-esf-load-on-demand.component';
const appRoutes = [
{
@@ -308,6 +309,10 @@ const appRoutes = [
path: 'gridFilterTemplate',
component: GridFilterTemplateSampleComponent
},
+ {
+ path: 'gridEsfLoadOnDemand',
+ component: GridEsfLoadOnDemandComponent
+ },
{
path: 'gridClipboard',
component: GridClipboardSampleComponent