feat(igx-combo): expose virtualization props and event #1260

Author: Lipata

projects/igniteui-angular/src/lib/combo/README.md

@@ -18,10 +18,10 @@ Basic usage of `igx-combo` bound to a local data source, defining `valueKey` and
 </igx-combo>
 ```
 
-Remote binding:
+Remote binding, defining `valueKey` and `displayKey`, and exposing `onDataPreLoad` that allows to load new chunk of remote data to the combo:
 
 ```html
-<igx-combo [data]="remoteData | async" [valueKey]="'ProductID'" [displayKey]="'ProductName'">
+<igx-combo [data]="remoteData | async" (onDataPreLoad)="dataLoading($event)" [valueKey]="'ProductID'" [displayKey]="'ProductName'" >
 </igx-combo>
 ```
 
@@ -188,6 +188,8 @@ When igxCombo is opened allow custom values are enabled and add item button is f
 |  `valueKey`              | combo value data source property                  | string                      |
 |  `displayKey`            | combo dispaly data source property                | string                      |
 |  `groupKey`              | combo item group                                  | string                      |
+|  `virtualizationState`   | defined he current state of the virtualized data. It contains `startIndex` and `chunkSize`      | `IForOfState`               |
+|  `totalItemCount`        | total count of the virtual data items, when using remote service                                | number                      |
 |  `width `                | defines combo width                               | string                      |
 |  `heigth`                | defines combo height                              | string                      |
 |  `itemsMaxHeight `       | defines drop down height                          | string                      |
@@ -206,6 +208,7 @@ When igxCombo is opened allow custom values are enabled and add item button is f
 | `onSelectionChange` | Emitted when item selection is changing, before the selection completes | true         | { oldSelection: `Array<any>`, newSelection: `Array<any>`, event: Event } |
 | `onSearchInput`     | Emitted when an the search input's input event is triggered             | false        | { searchValue: `string` }               |
 | `onAddition`        | Emitted when an item is being added to the data collection              | false        | { oldCollection: `Array<any>`, addedItem: `<any>`, newCollection: `Array<any>` }|
+| `onDataPreLoad`     | Emitted when new chunk of data is loaded from the virtualization        | false        | { event: Event }                        |
 | `dropDownOpening`   | Emitted before the dropdown is opened                                   | false        | { event: Event }                        |
 | `dropDownOpened`    | Emitted after the dropdown is opened                                    | false        | { event: Event }                        |
 | `dropDownClosing`   | Emitted before the dropdown is closed                                   | false        | { event: Event }                        |

projects/igniteui-angular/src/lib/combo/combo.component.html

@@ -41,7 +41,7 @@
             [igxDropDownItemNavigation]="dropdown" [tabindex]="dropdown.collapsed ? -1 : 0" role="listbox" [attr.id]="dropdown.id">
             <ng-template igxFor let-item [igxForOf]="data | comboFiltering:filteringExpressions:filteringLogic | comboSorting:sortingExpressions | comboGrouping:groupKey"
                 [igxForScrollOrientation]="'vertical'" [igxForContainerSize]="itemsMaxHeight"
-                [igxForItemSize]="itemHeight" #virtualScrollContainer>
+                [igxForItemSize]="itemHeight" (onChunkPreload)="dataLoading($event)" #virtualScrollContainer>
                 <igx-combo-item [itemData]="item" isHeader={{item.isHeader}} role="option">
                     <ng-container *ngIf="!item.isHeader">
                         <igx-checkbox [checked]="isItemSelected(item)" disableRipple="true" disabled="true"></igx-checkbox>

projects/igniteui-angular/src/lib/combo/combo.component.ts

@@ -11,7 +11,7 @@ import { cloneArray } from '../core/utils';
 import { IgxStringFilteringOperand, IgxBooleanFilteringOperand } from '../data-operations/filtering-condition';
 import { FilteringLogic } from '../data-operations/filtering-expression.interface';
 import { SortingDirection } from '../data-operations/sorting-expression.interface';
-import { IgxForOfModule } from '../directives/for-of/for_of.directive';
+import { IgxForOfModule, IForOfState } from '../directives/for-of/for_of.directive';
 import { IgxRippleModule } from '../directives/ripple/ripple.directive';
 import { IgxToggleModule } from '../directives/toggle/toggle.directive';
 import { IgxButtonModule } from '../directives/button/button.directive';
@@ -294,6 +294,16 @@ export class IgxComboComponent implements AfterViewInit, ControlValueAccessor, O
     @Output()
     public onSearchInput = new EventEmitter();
 
+    /**
+     * Emitted when new chunk of data is loaded from the virtualization
+     *
+     * ```html
+     * <igx-combo (onDataPreLoad)='handleDataPreloadEvent()'></igx-combo>
+     * ```
+     */
+    @Output()
+    public onDataPreLoad = new EventEmitter<any>();
+
     /**
      * Sets the style width of the element
      *
@@ -549,6 +559,21 @@ export class IgxComboComponent implements AfterViewInit, ControlValueAccessor, O
         this.dropdown.toggle();
     }
 
+    get virtualizationState(): IForOfState {
+        return this.dropdown.verticalScrollContainer.state;
+    }
+    set virtualizationState(state) {
+        this.dropdown.verticalScrollContainer.state = state;
+    }
+
+    get totalItemCount() {
+        return this.dropdown.verticalScrollContainer.totalItemCount;
+    }
+    set totalItemCount(count) {
+        this.dropdown.verticalScrollContainer.totalItemCount = count;
+        this.cdr.detectChanges();
+    }
+
     /**
      * @hidden
      */
@@ -905,6 +930,13 @@ export class IgxComboComponent implements AfterViewInit, ControlValueAccessor, O
         this.filteredData = [...this.data];
     }
 
+    /**
+     * @hidden
+     */
+    public dataLoading(event) {
+        this.onDataPreLoad.emit(event);
+    }
+
     /**
      * @hidden
      */