diff --git a/live-editing/configs/GridConfigGenerator.ts b/live-editing/configs/GridConfigGenerator.ts index 7d512e6b3c..0dca16af41 100644 --- a/live-editing/configs/GridConfigGenerator.ts +++ b/live-editing/configs/GridConfigGenerator.ts @@ -80,6 +80,9 @@ import { import { ExcelStyleFilteringStyleComponent } from "../../src/app/grid/grid-excel-style-filtering-style/grid-excel-style-filtering-style.component"; +import { + GridExcelStyleFilteringLoadOnDemandComponent +} from "../../src/app/grid/grid-excel-style-filtering-load-on-demand/grid-excel-style-filtering-load-on-demand.component"; import { FilteringSampleComponent } from "../../src/app/grid/grid-filtering-sample/grid-filtering-sample.component"; import { GridFilteringStyleComponent } from "../../src/app/grid/grid-filtering-style/grid-filtering-style.component"; import { @@ -163,6 +166,7 @@ import { DataService } from "../../src/app/grid/services/data.service"; import { RemoteFilteringService } from "../../src/app/grid/services/remoteFilteringService"; import { RemotePagingService } from "../../src/app/grid/services/remotePagingService"; import { RemoteServiceVirt } from "../../src/app/grid/services/remoteService"; +import { RemoteValuesService } from "../../src/app/grid/grid-excel-style-filtering-load-on-demand/remoteValues.service"; import { AppModuleConfig } from "./core/AppModuleConfig"; import { Config } from "./core/Config"; import { IConfigGenerator } from "./core/IConfigGenerator"; @@ -731,6 +735,18 @@ export class GridConfigGenerator implements IConfigGenerator { }) })); + configs.push(new Config({ + component: GridExcelStyleFilteringLoadOnDemandComponent, + additionalFiles: ["/src/app/grid/grid-excel-style-filtering-load-on-demand/remoteValues.service.ts", + "/src/app/grid/grid-excel-style-filtering-load-on-demand/employees.ts"], + appModuleConfig: new AppModuleConfig({ + imports: [GridExcelStyleFilteringLoadOnDemandComponent, IgxGridModule, RemoteValuesService], + ngDeclarations: [GridExcelStyleFilteringLoadOnDemandComponent], + ngImports: [IgxGridModule], + ngProviders: [RemoteValuesService] + }) + })); + configs.push(new Config({ component: ExcelStyleFilteringStyleComponent, additionalFiles: ["/src/app/data/nwindData.ts"], diff --git a/live-editing/configs/HierarchicalGridConfigGenerator.ts b/live-editing/configs/HierarchicalGridConfigGenerator.ts index 37ebf50cac..dec79ee14f 100644 --- a/live-editing/configs/HierarchicalGridConfigGenerator.ts +++ b/live-editing/configs/HierarchicalGridConfigGenerator.ts @@ -30,6 +30,7 @@ import { HGridDisplayDensitySampleComponent } from "../../src/app/hierarchical-g import { HGridEditingEventsComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-editing-events/hierarchical-grid-editing-events.component"; import { HGridEditingStyleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-editing-style/hierarchical-grid-editing-style.component"; import { HGridEditingSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-editing/hierarchical-grid-editing.component"; +import { HierarchicalGridExcelStyleFilteringLoadOnDemandComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-load-on-demand/hierarchical-grid-excel-style-filtering-load-on-demand.component"; import { HGridExcelStyleFilteringSample1Component } from "../../src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-1/hierarchical-grid-excel-style-filtering-sample-1.component"; @@ -75,6 +76,7 @@ import { HGridToolbarCustomSampleComponent } from "../../src/app/hierarchical-gr import { HGridToolbarOptionsSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-options.component"; import { HGridToolbarTitleSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-title.component"; import { RemoteLoDService } from "../../src/app/hierarchical-grid/services/remote-lod.service"; +import { RemoteValuesService } from "../../src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-load-on-demand/remoteValues.service"; import { AppModuleConfig } from "./core/AppModuleConfig"; import { Config } from "./core/Config"; import { IConfigGenerator } from "./core/IConfigGenerator"; @@ -490,6 +492,19 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator { component: HierarchicalGridLoDSampleComponent })); + // Hierarchical Grid Excel Style Filtering Load On Demand Sample + configs.push(new Config({ + additionalFiles: ["/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-load-on-demand/remoteValues.service.ts", + "/src/app/hierarchical-grid/data.ts"], + appModuleConfig: new AppModuleConfig({ + imports: [IgxHierarchicalGridModule, HierarchicalGridExcelStyleFilteringLoadOnDemandComponent, RemoteValuesService], + ngDeclarations: [HierarchicalGridExcelStyleFilteringLoadOnDemandComponent], + ngImports: [IgxHierarchicalGridModule], + ngProviders: [RemoteValuesService] + }), + component: HierarchicalGridExcelStyleFilteringLoadOnDemandComponent + })); + configs.push(new Config({ additionalFiles: ["/src/app/data/files.data.ts"], appModuleConfig: new AppModuleConfig({ diff --git a/live-editing/configs/TreeGridConfigGenerator.ts b/live-editing/configs/TreeGridConfigGenerator.ts index 5b4809fd10..477d9eb4c7 100644 --- a/live-editing/configs/TreeGridConfigGenerator.ts +++ b/live-editing/configs/TreeGridConfigGenerator.ts @@ -39,6 +39,7 @@ import { TreeGridDisplaydensitySampleComponent } from "../../src/app/tree-grid/t import { TreeGridEditingEventsComponent } from "../../src/app/tree-grid/tree-grid-editing-events/tree-grid-editing-events.component"; import { TreeGridEditingSampleComponent } from "../../src/app/tree-grid/tree-grid-editing-sample/tree-grid-editing-sample.component"; import { TreeGridEditingStyleComponent } from "../../src/app/tree-grid/tree-grid-editing-style/tree-grid-editing-sample.component"; +import { TreeGridExcelStyleFilteringLoadOnDemandComponent } from '../../src/app/tree-grid/tree-grid-excel-style-filtering-load-on-demand/tree-grid-excel-style-filtering-load-on-demand.component'; import { TreeGridExcelStyleFilteringSample1Component } from "../../src/app/tree-grid/tree-grid-excel-style-filtering-sample-1/tree-grid-excel-style-filtering-sample-1.component"; @@ -87,6 +88,7 @@ import { TreeGridToolbarSample3Component } from "../../src/app/tree-grid/tree-gr import { TreeGridToolbarSample4Component } from "../../src/app/tree-grid/tree-grid-toolbar-sample-4/tree-grid-toolbar-sample-4.component"; import { TreeGridToolbarStyleComponent } from "../../src/app/tree-grid/tree-grid-toolbar-style/tree-grid-toolbar-style.component"; import { TreeGridVirtualizationSampleComponent } from "../../src/app/tree-grid/tree-grid-virtualization-sample/tree-grid-virtualization-sample.component"; +import { RemoteValuesService } from '../../src/app/tree-grid/tree-grid-excel-style-filtering-load-on-demand/remoteValues.service'; import { AppModuleConfig } from "./core/AppModuleConfig"; import { Config } from "./core/Config"; import { IConfigGenerator } from "./core/IConfigGenerator"; @@ -662,6 +664,19 @@ export class TreeGridConfigGenerator implements IConfigGenerator { component: TreeGridLoadOnDemandSampleComponent })); + // TreeGrid Excel Style Filtering Load On Demand Sample + configs.push(new Config({ + additionalFiles: ["/src/app/tree-grid/tree-grid-excel-style-filtering-load-on-demand/remoteValues.service.ts", + "/src/app/tree-grid/data/employees-flat.ts"], + appModuleConfig: new AppModuleConfig({ + imports: [IgxTreeGridModule, TreeGridExcelStyleFilteringLoadOnDemandComponent, IgxIconModule, RemoteValuesService], + ngDeclarations: [TreeGridExcelStyleFilteringLoadOnDemandComponent], + ngImports: [IgxTreeGridModule, IgxIconModule], + ngProviders: [RemoteValuesService] + }), + component: TreeGridExcelStyleFilteringLoadOnDemandComponent + })); + // Tree Grid Row Drag - Advanced Sample configs.push(new Config({ additionalFiles: ["/src/app/tree-grid/data/employees.ts"], diff --git a/src/app/grid/grid-excel-style-filtering-load-on-demand/employees.ts b/src/app/grid/grid-excel-style-filtering-load-on-demand/employees.ts new file mode 100644 index 0000000000..27b6012a1f --- /dev/null +++ b/src/app/grid/grid-excel-style-filtering-load-on-demand/employees.ts @@ -0,0 +1,434 @@ +/* tslint:disable */ +export const SAMPLE_DATA = [ + { + "ID": "ALFKI", + "CompanyName": "Alfreds Futterkiste", + "ContactName": "Maria Anders", + "ContactTitle": "Sales Representative", + "Address": "Obere Str. 57", + "City": "Berlin", "Region": undefined, + "PostalCode": "12209", + "Country": "Germany", + "Phone": "030-0074321", + "Fax": "030-0076545", + "Employees": 68, + "DateCreated": new Date(2018, 8, 17), + "Contract": null + }, + { + "ID": "ANATR", + "CompanyName": "Ana Trujillo Emparedados y helados", + "ContactName": "Ana Trujillo", + "ContactTitle": "Owner", + "Address": "Avda. de la Constitución 2222", + "City": "México D.F.", + "Region": "", + "PostalCode": "05021", + "Country": "Mexico", + "Phone": "(5) 555-4729", + "Fax": "(5) 555-3745", + "Employees": 47, + "DateCreated": new Date(2015, 10, 1), + "Contract": true + }, + { + "ID": "ANTON", + "CompanyName": "Antonio Moreno Taquería", + "ContactName": "Antonio Moreno", + "ContactTitle": "Owner", + "Address": "Mataderos 2312", + "City": "México D.F.", + "Region": null, + "PostalCode": "05023", + "Country": "Mexico", + "Phone": "(5) 555-3932", + "Fax": null, + "Employees": 16, + "DateCreated": new Date(2016, 5, 5), + "Contract": false + }, + { + "ID": "AROUT", + "CompanyName": "Around the Horn", + "ContactName": "Thomas Hardy", + "ContactTitle": "Sales Representative", + "Address": "120 Hanover Sq.", + "City": "London", + "Region": null, + "PostalCode": "WA1 1DP", + "Country": "UK", + "Phone": "(171) 555-7788", + "Fax": "(171) 555-6750", + "Employees": 71, + "DateCreated": new Date(2010, 2, 15), + "Contract": false + }, + { + "ID": "BERGS", + "CompanyName": "Berglunds snabbköp", + "ContactName": "Christina Berglund", + "ContactTitle": "Order Administrator", + "Address": "Berguvsvägen 8", + "City": "Luleå", + "Region": null, + "PostalCode": "S-958 22", + "Country": "Sweden", + "Phone": "0921-12 34 65", + "Fax": "0921-12 34 67", + "Employees": 213, + "DateCreated": new Date(2015, 2, 5), + "Contract": true + }, + { + "ID": "BLAUS", + "CompanyName": "Blauer See Delikatessen", + "ContactName": "Hanna Moos", + "ContactTitle": "Sales Representative", + "Address": "Forsterstr. 57", + "City": "Mannheim", + "Region": null, + "PostalCode": "68306", + "Country": "Germany", + "Phone": "0621-08460", + "Fax": "0621-08924", + "Employees": 347, + "DateCreated": new Date(2016, 7, 1), + "Contract": true + }, + { + "ID": "BLONP", + "CompanyName": "Blondesddsl père et fils", + "ContactName": "Frédérique Citeaux", + "ContactTitle": "Marketing Manager", + "Address": "24, place Kléber", + "City": "Strasbourg", + "Region": null, + "PostalCode": "67000", + "Country": "France", + "Phone": "88.60.15.31", + "Fax": "88.60.15.32", + "Employees": 34, + "DateCreated": new Date(2016, 10, 5), + "Contract": true + }, + { + "ID": "BOLID", + "CompanyName": "Bólido Comidas preparadas", + "ContactName": "Martín Sommer", + "ContactTitle": "Owner", + "Address": "C/ Araquil, 67", + "City": "Madrid", + "Region": null, + "PostalCode": "28023", + "Country": "Spain", + "Phone": "(91) 555 22 82", + "Fax": "(91) 555 91 99", + "Employees": 54, + "DateCreated": new Date(2016, 4, 20), + "Contract": true + }, + { + "ID": "BONAP", + "CompanyName": "Bon app", + "ContactName": "Laurence Lebihan", + "ContactTitle": "Owner", + "Address": "12, rue des Bouchers", + "City": "Marseille", + "Region": null, + "PostalCode": "13008", + "Country": "France", + "Phone": "91.24.45.40", + "Fax": "91.24.45.41", + "Employees": 68, + "DateCreated": new Date(2018, 3, 5), + "Contract": false + }, + { + "ID": "BOTTM", + "CompanyName": "Bottom-Dollar Markets", + "ContactName": "Elizabeth Lincoln", + "ContactTitle": "Accounting Manager", + "Address": "23 Tsawassen Blvd.", + "City": "Tsawassen", + "Region": "BC", + "PostalCode": "T2F 8M4", + "Country": "Canada", + "Phone": "(604) 555-4729", + "Fax": "(604) 555-3745", + "Employees": 107, + "DateCreated": new Date(2017, 6, 10), + "Contract": true + }, + { + "ID": "BSBEV", + "CompanyName": "Beverages", + "ContactName": "Victoria Ashworth", + "ContactTitle": "Sales Representative", + "Address": "Fauntleroy Circus", + "City": "London", + "Region": null, + "PostalCode": "EC2 5NT", + "Country": "UK", + "Phone": "(171) 555-1212", + "Fax": null, + "Employees": 197, + "DateCreated": new Date(2017, 10, 4), + "Contract": true + }, + { + "ID": "CACTU", + "CompanyName": + "Cactus Comidas para llevar", + "ContactName": "Patricio Simpson", + "ContactTitle": "Sales Agent", + "Address": "Cerrito 333", + "City": "Buenos Aires", + "Region": null, + "PostalCode": "1010", + "Country": "Argentina", + "Phone": "(1) 135-5555", + "Fax": "(1) 135-4892", + "Employees": 33, + "DateCreated": new Date(2014, 5, 12), + "Contract": false + }, + { + "ID": "CENTC", + "CompanyName": "Centro comercial Moctezuma", + "ContactName": "Francisco Chang", + "ContactTitle": "Marketing Manager", + "Address": "Sierras de Granada 9993", + "City": "México D.F.", + "Region": null, + "PostalCode": "05022", + "Country": "Mexico", + "Phone": "(5) 555-3392", + "Fax": "(5) 555-7293", + "Employees": 18, + "DateCreated": new Date(2015, 6, 27), + "Contract": true + }, + { + "ID": "CHOPS", + "CompanyName": "Chop-suey Chinese", + "ContactName": "Yang Wang", + "ContactTitle": "Owner", + "Address": "Hauptstr. 29", + "City": "Bern", + "Region": null, + "PostalCode": "3012", + "Country": "Switzerland", + "Phone": "0452-076545", + "Fax": null, + "Employees": 380, + "DateCreated": new Date(2011, 8, 6), + "Contract": true + }, + { + "ID": "COMMI", + "CompanyName": "Comércio Mineiro", + "ContactName": "Pedro Afonso", + "ContactTitle": "Sales Associate", + "Address": "Av. dos Lusíadas, 23", + "City": "Sao Paulo", "Region": "SP", + "PostalCode": "05432-043", + "Country": "Brazil", + "Phone": "(11) 555-7647", + "Fax": null, + "Employees": 137, + "DateCreated": new Date(2012, 6, 10), + "Contract": false + }, + { + "ID": "CONSH", + "CompanyName": "Consolidated Holdings", + "ContactName": "Elizabeth Brown", + "ContactTitle": "Sales Representative", + "Address": "Berkeley Gardens 12 Brewery", + "City": "London", + "Region": null, + "PostalCode": "WX1 6LT", + "Country": "UK", + "Phone": "(171) 555-2282", + "Fax": "(171) 555-9199", + "Employees": 150, + "DateCreated": new Date(2012, 6, 10), + "Contract": false + }, + { + "ID": "DRACD", + "CompanyName": "Drachenblut Delikatessen", + "ContactName": "Sven Ottlieb", + "ContactTitle": "Order Administrator", + "Address": "Walserweg 21", + "City": "Aachen", + "Region": null, + "PostalCode": "52066", + "Country": "Germany", + "Phone": "0241-039123", + "Fax": "0241-059428", + "Employees": 265, + "DateCreated": new Date(2014, 9, 11), + "Contract": true + }, + { + "ID": "DUMON", + "CompanyName": "Du monde entier", + "ContactName": "Janine Labrune", + "ContactTitle": "Owner", + "Address": "67, rue des Cinquante Otages", + "City": "Nantes", + "Region": null, + "PostalCode": "44000", + "Country": "France", + "Phone": "40.67.88.88", + "Fax": "40.67.89.89", + "Employees": 24, + "DateCreated": new Date(2015, 8, 4), + "Contract": true + }, + { + "ID": "EASTC", + "CompanyName": "Eastern Connection", + "ContactName": "Ann Devon", + "ContactTitle": "Sales Agent", + "Address": "35 King George", + "City": "London", + "Region": null, + "PostalCode": "WX3 6FW", + "Country": "UK", + "Phone": "(171) 555-0297", + "Fax": "(171) 555-3373", + "Employees": 123, + "DateCreated": new Date(2013, 4, 18), + "Contract": false + }, + { + "ID": "ERNSH", + "CompanyName": + "Ernst Handel", + "ContactName": "Roland Mendel", + "ContactTitle": "Sales Manager", + "Address": "Kirchgasse 6", + "City": "Graz", + "Region": null, + "PostalCode": "8010", + "Country": "Austria", + "Phone": "7675-3425", + "Fax": "7675-3426", + "Employees": 9, + "DateCreated": new Date(2013, 7, 9), + "Contract": true + }, + { + "ID": "FAMIA", + "CompanyName": "Familia Arquibaldo", + "ContactName": "Aria Cruz", + "ContactTitle": "Marketing Assistant", + "Address": "Rua Orós, 92", + "City": "Sao Paulo", + "Region": "SP", + "PostalCode": "05442-030", + "Country": "Brazil", + "Phone": "(11) 555-9857", + "Fax": null, + "Employees": 67, + "DateCreated": new Date(2015, 6, 17), + "Contract": true + }, + { + "ID": "FISSA", + "CompanyName": "FISSA Fabrica Inter. Salchichas S.A.", + "ContactName": "Diego Roel", + "ContactTitle": "Accounting Manager", + "Address": "C/ Moralzarzal, 86", + "City": "Madrid", + "Region": null, + "PostalCode": "28034", + "Country": "Spain", + "Phone": "(91) 555 94 44", + "Fax": "(91) 555 55 93", + "Employees": 87, + "DateCreated": new Date(2017, 3, 15), + "Contract": false + }, + { + "ID": "FOLIG", + "CompanyName": "Folies gourmandes", + "ContactName": "Martine Rancé", + "ContactTitle": "Assistant Sales Agent", + "Address": "184, chaussée de Tournai", + "City": "Lille", + "Region": null, + "PostalCode": "59000", + "Country": "France", + "Phone": "20.16.10.16", + "Fax": "20.16.10.17", + "Employees": 37, + "DateCreated": new Date(2014, 5, 14), + "Contract": false + }, + { + "ID": "FOLKO", + "CompanyName": "Folk och fä HB", + "ContactName": "Maria Larsson", + "ContactTitle": "Owner", + "Address": "Åkergatan 24", + "City": "Bräcke", + "Region": null, + "PostalCode": "S-844 67", + "Country": "Sweden", + "Phone": "0695-34 67 21", + "Fax": null, + "Employees": 42, + "DateCreated": new Date(2011, 3, 21), + "Contract": true + }, + { + "ID": "FRANK", + "CompanyName": "Frankenversand", + "ContactName": "Peter Franken", + "ContactTitle": "Marketing Manager", + "Address": "Berliner Platz 43", + "City": "München", + "Region": null, + "PostalCode": "80805", + "Country": "Germany", + "Phone": "089-0877310", + "Fax": "089-0877451", + "Employees": 17, + "DateCreated": new Date(2010, 7, 24), + "Contract": true + }, + { + "ID": "FRANR", + "CompanyName": "France restauration", + "ContactName": "Carine Schmitt", + "ContactTitle": "Marketing Manager", + "Address": "54, rue Royale", + "City": "Nantes", + "Region": null, + "PostalCode": "44000", + "Country": "France", + "Phone": "40.32.21.21", + "Fax": "40.32.21.20", + "Employees": 20, + "DateCreated": new Date(2011, 7, 14), + "Contract": true + }, + { + "ID": "FRANS", + "CompanyName": "Franchi S.p.A.", + "ContactName": "Paolo Accorti", + "ContactTitle": "Sales Representative", + "Address": "Via Monte Bianco 34", + "City": "Torino", "Region": null, + "PostalCode": "10100", + "Country": "Italy", + "Phone": "011-4988260", + "Fax": "011-4988261", + "Employees": 5, + "DateCreated": new Date(2012, 8, 3), + "Contract": false + } +]; diff --git a/src/app/grid/grid-excel-style-filtering-load-on-demand/grid-excel-style-filtering-load-on-demand.component.html b/src/app/grid/grid-excel-style-filtering-load-on-demand/grid-excel-style-filtering-load-on-demand.component.html new file mode 100644 index 0000000000..595311da54 --- /dev/null +++ b/src/app/grid/grid-excel-style-filtering-load-on-demand/grid-excel-style-filtering-load-on-demand.component.html @@ -0,0 +1,16 @@ +
+ + + + + + + + + + +
\ No newline at end of file diff --git a/src/app/grid/grid-excel-style-filtering-load-on-demand/grid-excel-style-filtering-load-on-demand.component.scss b/src/app/grid/grid-excel-style-filtering-load-on-demand/grid-excel-style-filtering-load-on-demand.component.scss new file mode 100644 index 0000000000..2649777ff2 --- /dev/null +++ b/src/app/grid/grid-excel-style-filtering-load-on-demand/grid-excel-style-filtering-load-on-demand.component.scss @@ -0,0 +1,3 @@ +.grid__wrapper { + margin: 15px; +} diff --git a/src/app/grid/grid-excel-style-filtering-load-on-demand/grid-excel-style-filtering-load-on-demand.component.ts b/src/app/grid/grid-excel-style-filtering-load-on-demand/grid-excel-style-filtering-load-on-demand.component.ts new file mode 100644 index 0000000000..d90c1ee936 --- /dev/null +++ b/src/app/grid/grid-excel-style-filtering-load-on-demand/grid-excel-style-filtering-load-on-demand.component.ts @@ -0,0 +1,28 @@ +import { Component, OnInit } from "@angular/core"; +import { IFilteringExpressionsTree, IgxColumnComponent } from "igniteui-angular"; +import { RemoteValuesService } from "./remoteValues.service"; + +@Component({ + selector: "app-grid-excel-style-filtering-load-on-demand", + styleUrls: ["./grid-excel-style-filtering-load-on-demand.component.scss"], + templateUrl: "./grid-excel-style-filtering-load-on-demand.component.html", + providers: [RemoteValuesService] +}) +export class GridExcelStyleFilteringLoadOnDemandComponent implements OnInit { + + public data: any[]; + + constructor(private remoteValuesService: RemoteValuesService) { } + + public columnValuesStrategy = (column: IgxColumnComponent, + columnExprTree: IFilteringExpressionsTree, + done: (uniqueValues: any[]) => void) => { + // Get specific column data. + this.remoteValuesService.getColumnData(column, columnExprTree, uniqueValues => done(uniqueValues)); + } + + public ngOnInit() { + // Get full data. + this.data = this.remoteValuesService.getRecordsData(); + } +} diff --git a/src/app/grid/grid-excel-style-filtering-load-on-demand/remoteValues.service.ts b/src/app/grid/grid-excel-style-filtering-load-on-demand/remoteValues.service.ts new file mode 100644 index 0000000000..ef312eed05 --- /dev/null +++ b/src/app/grid/grid-excel-style-filtering-load-on-demand/remoteValues.service.ts @@ -0,0 +1,22 @@ +import { Injectable } from "@angular/core"; +import { FilteringStrategy, IFilteringExpressionsTree, IgxColumnComponent } from "igniteui-angular"; +import { SAMPLE_DATA } from "./employees"; + +@Injectable() +export class RemoteValuesService { + private _filteringStrategy = new FilteringStrategy(); + + public getRecordsData() { + return SAMPLE_DATA; + } + + 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/grid/grid-routes-data.ts b/src/app/grid/grid-routes-data.ts index 401587666a..ec4cff4c7d 100644 --- a/src/app/grid/grid-routes-data.ts +++ b/src/app/grid/grid-routes-data.ts @@ -72,5 +72,7 @@ export const gridsRoutesData = { "grid-column-hiding-style": { displayName: "Grid Column Hiding Style", parentName: "Grid" }, "grid-clipboard-operations-sample": { displayName: "Grid Clipboard Operations", parentName: "Grid" }, "grid-toolbar-style": { displayName: "Grid Toolbar Style", parentName: "Grid" }, - "grid-filtering-style": { displayName: "Grid Filtering Style", parentName: "Grid" } + "grid-filtering-style": { displayName: "Grid Filtering Style", parentName: "Grid" }, + "grid-excel-style-filtering-load-on-demand": + { displayName: "Grid Excel Style Filtering Load On Demand", parentName: "Grid" } }; diff --git a/src/app/grid/grids-routing.module.ts b/src/app/grid/grids-routing.module.ts index 95dc51087e..71ea993bc7 100644 --- a/src/app/grid/grids-routing.module.ts +++ b/src/app/grid/grids-routing.module.ts @@ -15,6 +15,7 @@ import { GridCustomKBNavigationComponent } from "./grid-custom-kb-navigation/gri import { GridCustomSummariesSelection } from "./grid-custom-summaries-selection/grid-custom-summaries-selection.component"; import { GridDisplayDensitySampleComponent } from "./grid-displaydensity-sample/grid-displaydensity-sample.component"; import { GridEditingSampleComponent } from "./grid-editing-sample/grid-editing-sample.component"; +import { GridExcelStyleFilteringLoadOnDemandComponent } from "./grid-excel-style-filtering-load-on-demand/grid-excel-style-filtering-load-on-demand.component"; import { ExcelStyleFilteringSample1Component } from "./grid-excel-style-filtering-sample-1/grid-excel-style-filtering-sample-1.component"; import { ExcelStyleFilteringSample2Component } from "./grid-excel-style-filtering-sample-2/grid-excel-style-filtering-sample-2.component"; import { ExcelStyleFilteringSample3Component } from "./grid-excel-style-filtering-sample-3/grid-excel-style-filtering-sample-3.component"; @@ -420,6 +421,11 @@ export const gridsRoutes: Routes = [ data: gridsRoutesData["grid-filtering-style"], path: "grid-filtering-style" }, + { + component: GridExcelStyleFilteringLoadOnDemandComponent, + data: gridsRoutesData["grid-excel-style-filtering-load-on-demand"], + path: "grid-excel-style-filtering-load-on-demand" + }, { component: GridCustomSummariesSelection, data: gridsRoutesData["grid-selection-custom-summaries"], diff --git a/src/app/grid/grids.module.ts b/src/app/grid/grids.module.ts index 622c5733e3..d125730100 100644 --- a/src/app/grid/grids.module.ts +++ b/src/app/grid/grids.module.ts @@ -26,6 +26,7 @@ import { GridCustomSummariesSelection } from "./grid-custom-summaries-selection/ import { SummariesData } from "./grid-custom-summaries-selection/summaries-data/summaries-data.component"; import { GridDisplayDensitySampleComponent } from "./grid-displaydensity-sample/grid-displaydensity-sample.component"; import { GridEditingSampleComponent } from "./grid-editing-sample/grid-editing-sample.component"; +import { GridExcelStyleFilteringLoadOnDemandComponent } from "./grid-excel-style-filtering-load-on-demand/grid-excel-style-filtering-load-on-demand.component"; import { ExcelStyleFilteringSample1Component } from "./grid-excel-style-filtering-sample-1/grid-excel-style-filtering-sample-1.component"; import { ExcelStyleFilteringSample2Component } from "./grid-excel-style-filtering-sample-2/grid-excel-style-filtering-sample-2.component"; import { ExcelStyleFilteringSample3Component } from "./grid-excel-style-filtering-sample-3/grid-excel-style-filtering-sample-3.component"; @@ -166,6 +167,7 @@ import { GridMultiColumnHeadersStylingComponent } from "./multi-column-headers-s GridGroupByPagingSampleComponent, GridPagerSampleComponent, GridFilteringStyleComponent, + GridExcelStyleFilteringLoadOnDemandComponent, GridCustomSummariesSelection, GridMultiRowLayoutStylingComponent, PinningStylingComponent, diff --git a/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-load-on-demand/hierarchical-grid-excel-style-filtering-load-on-demand.component.html b/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-load-on-demand/hierarchical-grid-excel-style-filtering-load-on-demand.component.html new file mode 100644 index 0000000000..57a11f122a --- /dev/null +++ b/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-load-on-demand/hierarchical-grid-excel-style-filtering-load-on-demand.component.html @@ -0,0 +1,31 @@ +
+ + + +
+ +
+ + + + + + + + + + + + + + + + + + + +
\ No newline at end of file diff --git a/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-load-on-demand/hierarchical-grid-excel-style-filtering-load-on-demand.component.scss b/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-load-on-demand/hierarchical-grid-excel-style-filtering-load-on-demand.component.scss new file mode 100644 index 0000000000..a91a2aea90 --- /dev/null +++ b/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-load-on-demand/hierarchical-grid-excel-style-filtering-load-on-demand.component.scss @@ -0,0 +1,11 @@ +.wrapper { + margin: 16px; +} + +.photo { + vertical-align: middle; + max-height: 40px; +} +.cell__inner { + margin: 1px auto 1px auto; +} diff --git a/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-load-on-demand/hierarchical-grid-excel-style-filtering-load-on-demand.component.ts b/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-load-on-demand/hierarchical-grid-excel-style-filtering-load-on-demand.component.ts new file mode 100644 index 0000000000..918cc96ffc --- /dev/null +++ b/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-load-on-demand/hierarchical-grid-excel-style-filtering-load-on-demand.component.ts @@ -0,0 +1,37 @@ +import { Component, OnInit } from "@angular/core"; +import { IFilteringExpressionsTree, IgxColumnComponent } from "igniteui-angular"; +import { RemoteValuesService } from "./remoteValues.service"; + +@Component({ + selector: "app-hierarchical-grid-excel-style-filtering-load-on-demand", + templateUrl: "./hierarchical-grid-excel-style-filtering-load-on-demand.component.html", + styleUrls: ["./hierarchical-grid-excel-style-filtering-load-on-demand.component.scss"], + providers: [RemoteValuesService] +}) +export class HierarchicalGridExcelStyleFilteringLoadOnDemandComponent implements OnInit { + + public localdata: any[]; + + constructor(private remoteValuesService: RemoteValuesService) { } + + public singersColumnValuesStrategy = (column: IgxColumnComponent, + columnExprTree: IFilteringExpressionsTree, + done: (uniqueValues: any[]) => void) => { + // Get specific column data for the singers. + this.remoteValuesService.getColumnData( + null, "Singers", column, columnExprTree, uniqueValues => done(uniqueValues)); + } + + public albumsColumnValuesStrategy = (column: IgxColumnComponent, + columnExprTree: IFilteringExpressionsTree, + done: (uniqueValues: any[]) => void) => { + // Get specific column data for the albums of a specific singer. + const parentRowId = (column.grid as any).foreignKey; + this.remoteValuesService.getColumnData( + parentRowId, "Albums", column, columnExprTree, uniqueValues => done(uniqueValues)); + } + + public ngOnInit() { + this.localdata = this.remoteValuesService.getSingersData(); + } +} diff --git a/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-load-on-demand/remoteValues.service.ts b/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-load-on-demand/remoteValues.service.ts new file mode 100644 index 0000000000..e684d7c8a4 --- /dev/null +++ b/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-load-on-demand/remoteValues.service.ts @@ -0,0 +1,34 @@ +import { Injectable } from "@angular/core"; +import { FilteringStrategy, IFilteringExpressionsTree, IgxColumnComponent } from "igniteui-angular"; +import { SINGERS } from "../data"; + +@Injectable() +export class RemoteValuesService { + private _filteringStrategy = new FilteringStrategy(); + + public getSingersData() { + return SINGERS; + } + + public getColumnData(parentId: any, key: string, + column: IgxColumnComponent, + columnExprTree: IFilteringExpressionsTree, + done: (colVals: any[]) => void) { + setTimeout(() => { + let filteredData = []; + + if (!parentId) { + // Generate unique column values for the singers. + filteredData = this._filteringStrategy.filter(this.getSingersData(), columnExprTree); + } else if (key === "Albums") { + // Generate unique column values for the albums of a specific singer. + const singer = this.getSingersData().find((rec) => rec.Artist === parentId); + const albums = singer ? (singer.Albums ? singer.Albums : []) : []; + filteredData = this._filteringStrategy.filter(albums, columnExprTree); + } + + const columnValues = filteredData.map(record => record[column.field]); + done(columnValues); + }, 1000); + } +} diff --git a/src/app/hierarchical-grid/hierarchical-grid-routes-data.ts b/src/app/hierarchical-grid/hierarchical-grid-routes-data.ts index af94fac572..fbb5b36b64 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-routes-data.ts +++ b/src/app/hierarchical-grid/hierarchical-grid-routes-data.ts @@ -14,6 +14,7 @@ export const hierarchicalGridRoutesData = { "hierarchical-grid-excel-style-filtering-sample-1": { displayName: "Hierarchical Grid Excel Style Filtering", parentName: "Hierarchical Grid" }, "hierarchical-grid-excel-style-filtering-sample-2": { displayName: "Hierarchical Grid Excel Style Filtering Operations", parentName: "Hierarchical Grid" }, "hierarchical-grid-excel-style-filtering-sample-3": { displayName: "Hierarchical Grid Excel Style Filtering Templates", parentName: "Hierarchical Grid" }, + "hierarchical-grid-excel-style-filtering-load-on-demand": { displayName: "Hierarchical Grid Excel Style Filtering Load On Demand", parentName: "Hierarchical Grid" }, "hierarchical-grid-excel-style-filtering-style": { displayName: "Hierarchical Grid Excel Style Filtering Styling", parentName: "Hierarchical Grid" }, "hierarchical-grid-custom-filtering": { displayName: "Hierarchical Grid Custom Filtering", parentName: "Hierarchical Grid" }, "hierarchical-grid-sorting": { displayName: "Hierarchical Grid Sorting", 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 index 1dfa8efbb3..fd8c7f15f0 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-routing.module.ts +++ b/src/app/hierarchical-grid/hierarchical-grid-routing.module.ts @@ -16,6 +16,7 @@ import { HGridDisplayDensitySampleComponent } from "./hierarchical-grid-display- import { HGridEditingEventsComponent } from "./hierarchical-grid-editing-events/hierarchical-grid-editing-events.component"; import { HGridEditingStyleComponent } from "./hierarchical-grid-editing-style/hierarchical-grid-editing-style.component"; import { HGridEditingSampleComponent } from "./hierarchical-grid-editing/hierarchical-grid-editing.component"; +import { HierarchicalGridExcelStyleFilteringLoadOnDemandComponent } from "./hierarchical-grid-excel-style-filtering-load-on-demand/hierarchical-grid-excel-style-filtering-load-on-demand.component"; import { HGridExcelStyleFilteringSample1Component } from "./hierarchical-grid-excel-style-filtering-sample-1/hierarchical-grid-excel-style-filtering-sample-1.component"; @@ -89,6 +90,12 @@ export const hierarchicalGridRoutes: Routes = [ data: hierarchicalGridRoutesData["hierarchical-grid-excel-style-filtering-sample-3"], path: "hierarchical-grid-excel-style-filtering-sample-3" }, + { + component: HierarchicalGridExcelStyleFilteringLoadOnDemandComponent, + // tslint:disable-next-line:no-string-literal + data: hierarchicalGridRoutesData["hierarchical-grid-excel-style-filtering-load-on-demand"], + path: "hierarchical-grid-excel-style-filtering-load-on-demand" + }, { component: HGridExcelStyleFilteringStyleComponent, // tslint:disable-next-line:no-string-literal diff --git a/src/app/hierarchical-grid/hierarchical-grid.module.ts b/src/app/hierarchical-grid/hierarchical-grid.module.ts index bb98da3e29..6945042145 100644 --- a/src/app/hierarchical-grid/hierarchical-grid.module.ts +++ b/src/app/hierarchical-grid/hierarchical-grid.module.ts @@ -19,6 +19,7 @@ import { HGridDisplayDensitySampleComponent } from "./hierarchical-grid-display- import { HGridEditingEventsComponent } from "./hierarchical-grid-editing-events/hierarchical-grid-editing-events.component"; import { HGridEditingStyleComponent } from "./hierarchical-grid-editing-style/hierarchical-grid-editing-style.component"; import { HGridEditingSampleComponent } from "./hierarchical-grid-editing/hierarchical-grid-editing.component"; +import { HierarchicalGridExcelStyleFilteringLoadOnDemandComponent } from "./hierarchical-grid-excel-style-filtering-load-on-demand/hierarchical-grid-excel-style-filtering-load-on-demand.component"; import { HGridExcelStyleFilteringSample1Component } from "./hierarchical-grid-excel-style-filtering-sample-1/hierarchical-grid-excel-style-filtering-sample-1.component"; import { HGridExcelStyleFilteringSample2Component } from "./hierarchical-grid-excel-style-filtering-sample-2/hierarchical-grid-excel-style-filtering-sample-2.component"; import { HGridExcelStyleFilteringSample3Component } from "./hierarchical-grid-excel-style-filtering-sample-3/hierarchical-grid-excel-style-filtering-sample-3.component"; @@ -103,6 +104,7 @@ import { HGridToolbarTitleSampleComponent } from "./hierarchical-grid-toolbar/hi HGridMultiHeaderTemplateSampleComponent, HierarchicalGridToolbarStyleComponent, HierarchicalGridFilteringStyleComponent, + HierarchicalGridExcelStyleFilteringLoadOnDemandComponent, HGridStylingComponent ], imports: [ diff --git a/src/app/tree-grid/tree-grid-excel-style-filtering-load-on-demand/remoteValues.service.ts b/src/app/tree-grid/tree-grid-excel-style-filtering-load-on-demand/remoteValues.service.ts new file mode 100644 index 0000000000..3887034aa6 --- /dev/null +++ b/src/app/tree-grid/tree-grid-excel-style-filtering-load-on-demand/remoteValues.service.ts @@ -0,0 +1,22 @@ +import { Injectable } from "@angular/core"; +import { FilteringStrategy, IFilteringExpressionsTree, IgxColumnComponent } from "igniteui-angular"; +import { generateEmployeeFlatData } from "../data/employees-flat"; + +@Injectable() +export class RemoteValuesService { + private _filteringStrategy = new FilteringStrategy(); + + public getRecordsData() { + return generateEmployeeFlatData(); + } + + 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/tree-grid/tree-grid-excel-style-filtering-load-on-demand/tree-grid-excel-style-filtering-load-on-demand.component.html b/src/app/tree-grid/tree-grid-excel-style-filtering-load-on-demand/tree-grid-excel-style-filtering-load-on-demand.component.html new file mode 100644 index 0000000000..c42d429824 --- /dev/null +++ b/src/app/tree-grid/tree-grid-excel-style-filtering-load-on-demand/tree-grid-excel-style-filtering-load-on-demand.component.html @@ -0,0 +1,16 @@ +
+ + + + + + + + account_circle + + + +
\ No newline at end of file diff --git a/src/app/tree-grid/tree-grid-excel-style-filtering-load-on-demand/tree-grid-excel-style-filtering-load-on-demand.component.scss b/src/app/tree-grid/tree-grid-excel-style-filtering-load-on-demand/tree-grid-excel-style-filtering-load-on-demand.component.scss new file mode 100644 index 0000000000..b6f79f464f --- /dev/null +++ b/src/app/tree-grid/tree-grid-excel-style-filtering-load-on-demand/tree-grid-excel-style-filtering-load-on-demand.component.scss @@ -0,0 +1,3 @@ +.grid__wrapper { + margin: 16px; +} diff --git a/src/app/tree-grid/tree-grid-excel-style-filtering-load-on-demand/tree-grid-excel-style-filtering-load-on-demand.component.ts b/src/app/tree-grid/tree-grid-excel-style-filtering-load-on-demand/tree-grid-excel-style-filtering-load-on-demand.component.ts new file mode 100644 index 0000000000..307879ca7a --- /dev/null +++ b/src/app/tree-grid/tree-grid-excel-style-filtering-load-on-demand/tree-grid-excel-style-filtering-load-on-demand.component.ts @@ -0,0 +1,27 @@ +import { Component, OnInit } from "@angular/core"; +import { IFilteringExpressionsTree, IgxColumnComponent } from "igniteui-angular"; +import { RemoteValuesService } from "./remoteValues.service"; + +@Component({ + selector: "app-tree-grid-excel-style-filtering-load-on-demand", + styleUrls: ["./tree-grid-excel-style-filtering-load-on-demand.component.scss"], + templateUrl: "./tree-grid-excel-style-filtering-load-on-demand.component.html", + providers: [RemoteValuesService] +}) +export class TreeGridExcelStyleFilteringLoadOnDemandComponent implements OnInit { + + public data: any[]; + + constructor(private remoteValuesService: RemoteValuesService) { } + + public ngOnInit() { + this.data = this.remoteValuesService.getRecordsData(); + } + + public columnValuesStrategy = (column: IgxColumnComponent, + columnExprTree: IFilteringExpressionsTree, + done: (uniqueValues: any[]) => void) => { + // Get specific column data. + this.remoteValuesService.getColumnData(column, columnExprTree, uniqueValues => done(uniqueValues)); + } +} diff --git a/src/app/tree-grid/tree-grid-routes-data.ts b/src/app/tree-grid/tree-grid-routes-data.ts index 7ed332656c..80daebf326 100644 --- a/src/app/tree-grid/tree-grid-routes-data.ts +++ b/src/app/tree-grid/tree-grid-routes-data.ts @@ -39,6 +39,8 @@ export const treeGridRoutesData = { displayName: "TreeGrid Excel Style Filtering Styling", parentName: "TreeGrid" }, + "treegrid-excel-style-filtering-load-on-demand": + { displayName: "TreeGrid Excel Style Filtering Load On Demand", parentName: "TreeGrid" }, "treegrid-filtering-custom": { displayName: "TreeGrid Custom Filtering", parentName: "TreeGrid" }, "treegrid-multi-column-header-template": { displayName: "TreeGrid Multi Column Header Template", diff --git a/src/app/tree-grid/tree-grid-routing.module.ts b/src/app/tree-grid/tree-grid-routing.module.ts index 4cc7d2a80c..d165e0b269 100644 --- a/src/app/tree-grid/tree-grid-routing.module.ts +++ b/src/app/tree-grid/tree-grid-routing.module.ts @@ -42,6 +42,9 @@ import { import { TreeGridDisplaydensitySampleComponent } from "./tree-grid-displaydensity-sample/tree-grid-displaydensity-sample.component"; import { TreeGridEditingSampleComponent } from "./tree-grid-editing-sample/tree-grid-editing-sample.component"; import { TreeGridEmployeesSampleComponent } from "./tree-grid-employees-sample/tree-grid-employees-sample.component"; +import { + TreeGridExcelStyleFilteringLoadOnDemandComponent +} from "./tree-grid-excel-style-filtering-load-on-demand/tree-grid-excel-style-filtering-load-on-demand.component"; import { TreeGridExcelStyleFilteringSample1Component } from "./tree-grid-excel-style-filtering-sample-1/tree-grid-excel-style-filtering-sample-1.component"; @@ -263,6 +266,11 @@ export const treeGridRoutes: Routes = [ data: treeGridRoutesData["treegrid-excel-style-filtering-style"], path: "treegrid-excel-style-filtering-style" }, + { + component: TreeGridExcelStyleFilteringLoadOnDemandComponent, + data: treeGridRoutesData["treegrid-excel-style-filtering-load-on-demand"], + path: "treegrid-excel-style-filtering-load-on-demand" + }, { component: TreeGridFilteringCustomSampleComponent, data: treeGridRoutesData["treegrid-filtering-custom"], diff --git a/src/app/tree-grid/tree-grid.module.ts b/src/app/tree-grid/tree-grid.module.ts index d8c75dbf36..80789a02a3 100644 --- a/src/app/tree-grid/tree-grid.module.ts +++ b/src/app/tree-grid/tree-grid.module.ts @@ -62,6 +62,9 @@ import { TreeGridEditingEventsComponent } from "./tree-grid-editing-events/tree- import { TreeGridEditingSampleComponent } from "./tree-grid-editing-sample/tree-grid-editing-sample.component"; import { TreeGridEditingStyleComponent } from "./tree-grid-editing-style/tree-grid-editing-sample.component"; import { TreeGridEmployeesSampleComponent } from "./tree-grid-employees-sample/tree-grid-employees-sample.component"; +import { + TreeGridExcelStyleFilteringLoadOnDemandComponent +} from "./tree-grid-excel-style-filtering-load-on-demand/tree-grid-excel-style-filtering-load-on-demand.component"; import { TreeGridExcelStyleFilteringSample1Component } from "./tree-grid-excel-style-filtering-sample-1/tree-grid-excel-style-filtering-sample-1.component"; @@ -205,7 +208,8 @@ import { TreeGridMultiColumnHeaderTemplateSampleComponent, TreeGridClipboardSampleComponent, TreeGridToolbarStyleComponent, - TreeGridFilteringStyleComponent + TreeGridFilteringStyleComponent, + TreeGridExcelStyleFilteringLoadOnDemandComponent ], imports: [ CommonModule,