Skip to content

Commit

Permalink
sample(esf): add grid esf LOD sample
Browse files Browse the repository at this point in the history
tachojelev committed Aug 12, 2019
1 parent c0a036c commit bf8dec2
Showing 8 changed files with 515 additions and 2 deletions.
434 changes: 434 additions & 0 deletions src/app/grid/grid-excel-style-filtering-load-on-demand/employees.ts

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<div class="grid__wrapper">
<igx-grid #grid1 [data]="data" [height]="'750px'" [showToolbar]="true" [displayDensity]="'cosy'"
[columnHiding]="true" [columnPinning]="true" [allowFiltering]="true" [filterMode]="'excelStyleFilter'"
[uniqueColumnValuesStrategy]="columnValuesStrategy">

<igx-column [field]="'ID'" [filterable]="true" [sortable]="true" [movable]="true" [dataType]="'string'"></igx-column>
<igx-column [field]="'CompanyName'" [filterable]="true" [sortable]="true" [movable]="true" [dataType]="'string'"></igx-column>
<igx-column [field]="'Employees'" [filterable]="true" [sortable]="true" [movable]="true" [dataType]="'number'"></igx-column>
<igx-column [field]="'Contract'" [filterable]="true" [sortable]="true" [movable]="true" [dataType]="'boolean'"></igx-column>
<igx-column [field]="'DateCreated'" [filterable]="true" [sortable]="true" [movable]="true" [dataType]="'date'"></igx-column>

<!-- <ng-template igxExcelStyleLoading>
Loading ...
</ng-template> -->
</igx-grid>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.grid__wrapper {
margin: 15px;
}
Original file line number Diff line number Diff line change
@@ -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();
}
}
Original file line number Diff line number Diff line change
@@ -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);
}
}
4 changes: 3 additions & 1 deletion src/app/grid/grid-routes-data.ts
Original file line number Diff line number Diff line change
@@ -64,5 +64,7 @@ export const gridsRoutesData = {
"multi-column-header-template": { displayName: "Grid Multi Column Header Template", 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" }
};
6 changes: 6 additions & 0 deletions src/app/grid/grids-routing.module.ts
Original file line number Diff line number Diff line change
@@ -14,6 +14,7 @@ import { GridCustomFilteringComponent } from "./grid-custom-filtering/grid-custo
import { GridCustomKBNavigationComponent } from "./grid-custom-kb-navigation/grid-custom-kb-navigation-sample.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";
@@ -384,6 +385,11 @@ export const gridsRoutes: Routes = [
component: GridFilteringStyleComponent,
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"
}
];

4 changes: 3 additions & 1 deletion src/app/grid/grids.module.ts
Original file line number Diff line number Diff line change
@@ -24,6 +24,7 @@ import { GridCustomFilteringComponent } from "./grid-custom-filtering/grid-custo
import { GridCustomKBNavigationComponent } from "./grid-custom-kb-navigation/grid-custom-kb-navigation-sample.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";
@@ -151,7 +152,8 @@ import { SortingStylingComponent } from "./grid-sorting-styling/grid-sorting-sty
GridToolbarStyleComponent,
GridGroupByPagingSampleComponent,
GridPagerSampleComponent,
GridFilteringStyleComponent
GridFilteringStyleComponent,
GridExcelStyleFilteringLoadOnDemandComponent
],
imports: [
CommonModule,

0 comments on commit bf8dec2

Please sign in to comment.