feat(esf): make corrections on POC #5448

Author: tachojelev

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.html

@@ -39,13 +39,13 @@
 
     <ng-template igxDataLoading>        
         <div style="display: flex; align-items: center;" class="esf-loading-indicator">
-            <ng-container *ngTemplateOutlet="grid.esfLoadingIndicatorTemplate ? grid.esfLoadingIndicatorTemplate : defaultEsfLoadingIndicatorTemplate">
+            <ng-container *ngTemplateOutlet="valuesLoadingTemplate">
             </ng-container>
         </div>
     </ng-template>
 </igx-list>
 
-<ng-template #defaultEsfLoadingIndicatorTemplate>
+<ng-template #defaultExcelStyleLoadingValuesTemplate>
     <igx-circular-bar [indeterminate]="true">
     </igx-circular-bar>
 </ng-template>

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts

@@ -4,16 +4,24 @@ import {
     ChangeDetectionStrategy,
     Input,
     ViewChild,
-    ChangeDetectorRef
+    ChangeDetectorRef,
+    TemplateRef,
+    Directive
 } from '@angular/core';
 import { IgxColumnComponent } from '../../column.component';
-import { IgxFilterOptions } from '../../../directives/filter/filter.directive';
 import { IChangeCheckboxEventArgs } from '../../../checkbox/checkbox.component';
 import { IgxInputDirective } from '../../../directives/input/input.directive';
 import { DisplayDensity } from '../../../core/density';
 import { IgxForOfDirective } from '../../../directives/for-of/for_of.directive';
 import { FilterListItem } from './grid.excel-style-filtering.component';
 
+@Directive({
+    selector: '[igxExcelStyleLoadingValuesTemplate]'
+})
+export class IgxExcelStyleLoadingValuesTemplateDirective {
+    constructor(public template: TemplateRef<any>) {}
+}
+
 /**
  * @hidden
  */
@@ -56,6 +64,17 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit {
     @ViewChild(IgxForOfDirective, { static: true })
     protected virtDir: IgxForOfDirective<any>;
 
+    @ViewChild('defaultExcelStyleLoadingValuesTemplate', { read: TemplateRef, static: true })
+    protected defaultExcelStyleLoadingValuesTemplate: TemplateRef<any>;
+
+    public get valuesLoadingTemplate() {
+        if (this.grid.excelStyleLoadingValuesTemplateDirective) {
+            return this.grid.excelStyleLoadingValuesTemplateDirective.template;
+        } else {
+            return this.defaultExcelStyleLoadingValuesTemplate;
+        }
+    }
+
     constructor(private _cdr: ChangeDetectorRef) { }
 
     public ngAfterViewInit() {

projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts

@@ -332,7 +332,7 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy, AfterView
     }
 
     public populateColumnData() {
-        if (this.grid.loadColumnValuesOnDemand) {
+        if (this.grid.loadExcelStyleUniqueValuesOnDemand) {
             this.loadValuesOnDemand();
         } else {
             this.loadValuesFromGridData();
@@ -341,7 +341,7 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy, AfterView
 
     private loadValuesOnDemand() {
         this.excelStyleSearch.isLoading = true;
-        this.grid.loadColumnValuesOnDemand(this.column.field, (columnUniqueValues: any[]) => {
+        this.grid.loadExcelStyleUniqueValuesOnDemand(this.column, (columnUniqueValues: any[]) => {
             if (this.column.dataType === DataType.Date) {
                 this.uniqueValues = Array.from(new Set(columnUniqueValues.map(val => val ? val.toDateString() : val)));
                 this.generateFilterValues(true);

projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { IgxExcelStyleLoadingValuesTemplateDirective } from './excel-style-search.component';
 import {
     IgxGridExcelStyleFilteringComponent,
     IgxExcelStyleSortingTemplateDirective,
@@ -47,6 +48,7 @@ import { IgxProgressBarModule } from '../../../progressbar/progressbar.component
         IgxExcelStyleHidingTemplateDirective,
         IgxExcelStyleMovingTemplateDirective,
         IgxExcelStylePinningTemplateDirective,
+        IgxExcelStyleLoadingValuesTemplateDirective,
         IgxExcelStyleSearchFilterPipe
     ],
     exports: [
@@ -55,6 +57,7 @@ import { IgxProgressBarModule } from '../../../progressbar/progressbar.component
         IgxExcelStyleHidingTemplateDirective,
         IgxExcelStyleMovingTemplateDirective,
         IgxExcelStylePinningTemplateDirective,
+        IgxExcelStyleLoadingValuesTemplateDirective,
         IgxExcelStyleDateExpressionComponent
     ],
     imports: [

projects/igniteui-angular/src/lib/grids/grid-base.component.ts

@@ -80,6 +80,7 @@ import { IgxSummaryRowComponent } from './summaries/summary-row.component';
 import { IgxGridSelectionService, GridSelectionRange, IgxGridCRUDService, IgxRow, IgxCell } from '../core/grid-selection';
 import { DragScrollDirection } from './drag-select.directive';
 import { ICachedViewLoadedEventArgs, IgxTemplateOutletDirective } from '../directives/template-outlet/template_outlet.directive';
+import { IgxExcelStyleLoadingValuesTemplateDirective } from './filtering/excel-style/excel-style-search.component';
 import {
     IgxExcelStyleSortingTemplateDirective,
     IgxExcelStylePinningTemplateDirective,
@@ -1002,17 +1003,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     }
 
     @Input()
-    public get esfLoadingIndicatorTemplate(): TemplateRef<any> {
-        return this._esfLoadingIndicatorTemplate;
-    }
-
-    public set esfLoadingIndicatorTemplate(value: TemplateRef<any>) {
-        this._esfLoadingIndicatorTemplate = value;
-        this.cdr.markForCheck();
-    }
-
-    @Input()
-    public loadColumnValuesOnDemand: (field: string, done: (values: any[]) => void) => void;
+    public loadExcelStyleUniqueValuesOnDemand: (field: string, done: (values: any[]) => void) => void;
 
     /**
      * Emitted when `IgxGridCellComponent` is clicked. Returns the `IgxGridCellComponent`.
@@ -1582,6 +1573,11 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     @ContentChild(IgxExcelStylePinningTemplateDirective, { read: IgxExcelStylePinningTemplateDirective, static: true })
     public excelStylePinningTemplateDirective: IgxExcelStylePinningTemplateDirective;
 
+    /**
+     *@hidden
+     */
+    @ContentChild(IgxExcelStyleLoadingValuesTemplateDirective, { read: IgxExcelStyleLoadingValuesTemplateDirective, static: true })
+    public excelStyleLoadingValuesTemplateDirective: IgxExcelStyleLoadingValuesTemplateDirective;
 
     /**
      * @hidden

src/app/grid-esf-load-on-demand/grid-esf-load-on-demand.component.html

@@ -8,25 +8,23 @@
       <div class="density-chooser">
         <igx-buttongroup [values]="displayDensities" (onSelect)="selectDensity($event)"></igx-buttongroup>
       </div>
-      <igx-grid #grid1 [data]="data" [displayDensity]="density" [showToolbar]="true"
-                [columnHiding]="true" [allowFiltering]="true" [rowSelectable]="true"
-                [filterMode]="'excelStyleFilter'" [width]="'900px'"
-                [height]="'800px'" [style.zIndex]="'1'"
+      <igx-grid #grid1 [data]="data" [width]="'900px'" [height]="'800px'" [displayDensity]="density"
+                [showToolbar]="true" [columnHiding]="true" [allowFiltering]="true" [rowSelectable]="true"
+                [filterMode]="'excelStyleFilter'" 
 
-                [loadColumnValuesOnDemand]="loadColumnValues"
-                [esfLoadingIndicatorTemplate]="loadTemplate"
+                [loadExcelStyleUniqueValuesOnDemand]="loadColumnValues"
                 >
 
         <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 igxExcelStyleLoadingValuesTemplate>
+          Loading ...
+        </ng-template> -->
       </igx-grid>
     </div>
   </div>
 </div>
-
-<ng-template #loadTemplate>
-  Loading ...
-</ng-template>

src/app/grid-esf-load-on-demand/grid-esf-load-on-demand.component.ts

@@ -1,5 +1,5 @@
 import { Component, ViewChild, OnInit } from '@angular/core';
-import { IgxGridComponent } from 'igniteui-angular';
+import { IgxGridComponent, IgxColumnComponent } from 'igniteui-angular';
 import { SAMPLE_DATA } from '../shared/sample-data';
 import { GridESFLoadOnDemandService } from './grid-esf-load-on-demand.service';
 
@@ -19,8 +19,8 @@ export class GridEsfLoadOnDemandComponent implements OnInit {
   @ViewChild('grid1', { static: true })
   public grid1: IgxGridComponent;
 
-  public loadColumnValues = (columnField: string, done: (uniqueValues: string[]) => void) => {
-    this.esfService.getData(columnField, uniqueValues => done(uniqueValues));
+  public loadColumnValues = (column: IgxColumnComponent, done: (uniqueValues: string[]) => void) => {
+    this.esfService.getData(column.field, uniqueValues => done(uniqueValues));
   }
 
   public ngOnInit(): void {