Merge pull request #10846 from IgniteUI/sstoychev/reemit-events-master

feat(grid): reemiting changing/ed events #10780 - master

Author: ChronosSF

CHANGELOG.md

@@ -26,6 +26,7 @@ All notable changes for each version of this project will be documented in this
         <igx-column field="Age"></igx-column>
     </igx-grid>
    ```
+   - Exposed `dataChanging` and `dataChanged` events for the three grids that are re-emits of the corresponding `IgxForOf` events. These indicate the beginning and end of the input change triggering the actual data re-rendering which happens each time the data view changes. This happens after changes in either the data the grid is bound or the state affecting the operations which alter this data (e.g. sorting, filtering, group-by).
    - Scrolling with the mouse wheel over cells with templates that include scrollable containers now correctly scroll these inner containers before the grid body scrolls.
 
 ## 13.0.5

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

@@ -224,6 +224,8 @@ A list of the events emitted by the **igx-grid**:
 |`rowEdit`|Emitted just before a row in edit mode's value is committed (e.g. by clicking the Done button on the Row Editing Overlay).|
 |`rowEditDone`|Emitted after exiting edit mode for a row and editing has been committed.|
 |`rowEditExit`|Emitted when a row exits edit mode without committing its values (e.g. by clicking the Cancel button on the Row Editing Overlay).|
+|`dataChanging`|Emitted before the grid's data view is changed because of a data operation, rebinding, etc.|
+|`dataChanged`|Emitted after the grid's data view is changed because of a data operation, rebinding, etc.|
 |`cellClick`|Emitted when a cell is clicked. Returns the cell object.|
 |`columnMoving`|Emitted when a column is moved. Returns the source and target columns objects. This event is cancelable.|
 |`columnMovingEnd`|Emitted when a column moving ends. Returns the source and target columns objects. This event is cancelable.|

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

@@ -41,7 +41,7 @@ import { cloneArray, mergeObjects, compareMaps, resolveNestedPath, isObject, Pla
 import { GridColumnDataType } from '../data-operations/data-util';
 import { FilteringLogic, IFilteringExpression } from '../data-operations/filtering-expression.interface';
 import { IGroupByRecord } from '../data-operations/groupby-record.interface';
-import { IgxGridForOfDirective } from '../directives/for-of/for_of.directive';
+import { IForOfDataChangingEventArgs, IgxGridForOfDirective } from '../directives/for-of/for_of.directive';
 import { IgxTextHighlightDirective } from '../directives/text-highlight/text-highlight.directive';
 import { ISummaryExpression } from './summaries/grid-summary';
 import { RowEditPositionStrategy, IPinningConfig } from './grid.common';
@@ -1060,6 +1060,29 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     @Output()
     public localeChange = new EventEmitter<boolean>();
 
+    /**
+     * Emitted before the grid's data view is changed because of a data operation, rebinding, etc.
+     * 
+     * @example
+     * ```typescript
+     *  <igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanging)='handleDataChangingEvent()'></igx-grid>
+     * ```
+     */
+     @Output()
+     public dataChanging = new EventEmitter<IForOfDataChangingEventArgs>();
+
+    /**
+     * Emitted after the grid's data view is changed because of a data operation, rebinding, etc.
+     * 
+     * @example
+     * ```typescript
+     *  <igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanged)='handleDataChangedEvent()'></igx-grid>
+     * ```
+     */
+    @Output()
+    public dataChanged = new EventEmitter<any>();
+ 
+
     /**
      * @hidden @internal
      */
@@ -3387,6 +3410,20 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         }
     }
 
+    /**
+     * @hidden @internal
+     */
+    public dataRebinding(event: IForOfDataChangingEventArgs) {
+        this.dataChanging.emit(event);
+    }
+
+    /**
+     * @hidden @internal
+     */
+    public dataRebound(event) {
+        this.dataChanged.emit(event);
+    }
+
     /** @hidden @internal */
     public createFilterDropdown(column: ColumnType, options: OverlaySettings) {
         options.outlet = this.outlet;

projects/igniteui-angular/src/lib/grids/grid/grid.component.html

@@ -81,7 +81,7 @@
             [igxForContainerSize]='calcHeight'
             [igxForItemSize]="hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight"
             [igxForTrackBy]='trackChanges'
-            #verticalScrollContainer (chunkPreload)="dataLoading($event)">
+            #verticalScrollContainer (chunkPreload)="dataLoading($event)" (dataChanging)="dataRebinding($event)" (dataChanged)="dataRebound($event)">
             <ng-template
                 [igxTemplateOutlet]='getRowTemplate(rowData)'
                 [igxTemplateOutletContext]='getContext(rowData, rowIndex)'

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html

@@ -58,7 +58,7 @@
         | gridRowPinning:id:false:pipeTrigger"
             [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
             [igxForContainerSize]='calcHeight' [igxForItemSize]="renderedRowHeight" [igxForTrackBy]='trackChanges'
-            #verticalScrollContainer (chunkPreload)="dataLoading($event)">
+            #verticalScrollContainer (chunkPreload)="dataLoading($event)" (dataChanging)="dataRebinding($event)" (dataChanged)="dataRebound($event)">
             <ng-template
                 [igxTemplateOutlet]='(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) ? child_record_template : hierarchical_record_template))'
                 [igxTemplateOutletContext]='getContext(rowData, rowIndex, false)' (viewCreated)='viewCreatedHandler($event)'

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html

@@ -61,7 +61,8 @@
         | treeGridAddRow:false:pipeTrigger
         | gridRowPinning:id:false:pipeTrigger"
             let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
-            [igxForContainerSize]='calcHeight' [igxForItemSize]="renderedRowHeight" #verticalScrollContainer>
+            [igxForContainerSize]='calcHeight' [igxForItemSize]="renderedRowHeight" #verticalScrollContainer
+            (dataChanging)="dataRebinding($event)" (dataChanged)="dataRebound($event)">
             <ng-template [igxTemplateOutlet]='isSummaryRow(rowData) ? summary_template : record_template'
                 [igxTemplateOutletContext]='getContext(rowData, rowIndex, false)'
                 (cachedViewLoaded)='cachedViewLoaded($event)'>