Merge branch 'master' into mvenkov/update-toggle-event-emitters

wnvko · web-flow · commit 470a5b122717 · 2020-10-02T16:57:00.000+03:00
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -173,6 +173,11 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     private _cdrRequests = false;
     protected _cdrRequestRepaint = false;
 
+    /**
+     * @hidden @internal
+     */
+    public snackbarDisplayTime = 2000;
+
     /**
      * @hidden @internal
      */
@@ -4062,6 +4067,10 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this.endEdit(true);
         this.cancelAddMode = false;
 
+        if (this.expansionStates.get(rowID)) {
+            this.collapseRow(rowID);
+        }
+
         this.addRowParent = {
             rowID: rowID,
             index: index,
diff --git a/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html b/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html
@@ -12,6 +12,19 @@
         [containerClass]="'igx-grid__td-text'"
         [metadata]="searchMetadata">{{ formatter ? (value | columnFormatter:formatter) : column.dataType === 'number' ? (value | igxdecimal:grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value }}</div>
 </ng-template>
+<ng-template #addRowCell let-cell="cell">
+    <div igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
+    [cssClass]="highlightClass"
+    [activeCssClass]="activeHighlightClass"
+    [groupName]="gridID"
+    [value]="formatter ? (value | columnFormatter:formatter) : column.dataType === 'number' ? (value | igxdecimal: grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value"
+    [row]="rowData"
+    [column]="this.column.field"
+    [containerClass]="'igx-grid__td-text'"
+    [metadata]="searchMetadata">{{
+        value ? value : (column.header || column.field)
+    }}</div>
+</ng-template>
 <ng-template #inlineEditor  let-cell="cell">
     <ng-container *ngIf="column.dataType === 'string'">
         <igx-input-group displayDensity="compact">
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html
@@ -131,6 +131,7 @@
         [ngStyle]="col.cellStyles | igxCellStyles:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
         [expanded]="expanded"
         [editMode]="col.editable && crudService.isInEditMode(index, col.index)"
+        [addMode]="col.editable && crudService.isInAddMode(index,col.index)"
         [column]="col"
         [formatter]="col.formatter"
         [row]="this"
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html
@@ -232,7 +232,7 @@
     <div class="igx-grid__scroll-end" [style.float]='"right"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]="pinnedWidth === 0 || isPinningToStart"></div>
 </div>
 <div class="igx-grid__addrow-snackbar">
-    <igx-snackbar #addRowSnackbar [actionText]="snackbarActionText" displayTime='2000'>{{snackbarLabel}}</igx-snackbar>
+    <igx-snackbar #addRowSnackbar [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
 </div>
 
 <div class="igx-grid__footer" #footer>
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html
@@ -119,7 +119,8 @@
         | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger
         | gridHierarchicalPaging:page:perPage:id:pipeTrigger
         | gridHierarchical:expansionStates:id:primaryKey:childLayoutKeys:pipeTrigger
-        | gridRowPinning:id:false:pipeTrigger"
+        | gridRowPinning:id:false:pipeTrigger
+        | gridAddRow:pipeTrigger"
             [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
             [igxForContainerSize]='calcHeight' [igxForItemSize]="renderedRowHeight" [igxForTrackBy]='trackChanges'
             #verticalScrollContainer (onChunkPreload)="dataLoading($event)">
@@ -130,8 +131,8 @@
             </ng-template>
             <!-- <ng-container *igxTemplateOutlet="(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) && isExpanded(rowData) ? child_record_template : hierarchical_record_template)); context: getContext(rowData)"></ng-container> -->
         </ng-template>
-        <ng-template #hierarchical_record_template let-rowIndex="index" let-disabledRow="disabled" let-rowData>
-            <igx-hierarchical-grid-row [gridID]="id" [index]="rowIndex" [disabled]="disabledRow" [rowData]="rowData" #row>
+        <ng-template #hierarchical_record_template let-rowIndex="index" let-disabledRow="disabled" let-rowData let-isAddRow="addRow">
+            <igx-hierarchical-grid-row [gridID]="id" [index]="rowIndex" [disabled]="disabledRow" [rowData]="rowData" [addRow]="isAddRow" #row>
             </igx-hierarchical-grid-row>
         </ng-template>
 
@@ -190,6 +191,10 @@
     <div class="igx-grid__scroll-end" [style.float]='"right"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]="pinnedWidth === 0 || isPinningToStart"></div>
 </div>
 
+<div class="igx-grid__addrow-snackbar">
+    <igx-snackbar #addRowSnackbar [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
+</div>
+
 <div class="igx-grid__footer" #footer>
     <ng-content select="igx-grid-footer"></ng-content>
     <ng-container *ngIf="paging && totalRecords">
@@ -242,7 +247,7 @@
     <button igxButton igxRowEditTabStop (click)="endRowEdit(true, $event)">Done</button>
 </ng-template>
 <ng-template #defaultRowEditTemplate>
-    <div class="igx-banner__message">
+    <div class="igx-banner__message" *ngIf="!this.crudService.row?.isAddRow">
         <span class="igx-banner__text">
             <ng-container
                 *ngTemplateOutlet="rowEditText ? rowEditText : defaultRowEditText; context: { $implicit: rowChangesCount }">
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts
@@ -548,10 +548,11 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
             }
         } else {
             return {
-                $implicit: this.isGhostRecord(rowData) ? rowData.recordRef : rowData,
+                $implicit: this.isGhostRecord(rowData) || this.isAddRowRecord(rowData) ? rowData.recordRef : rowData,
                 templateID: 'dataRow',
                 index: this.getDataViewIndex(rowIndex, pinned),
-                disabled: this.isGhostRecord(rowData)
+                disabled: this.isGhostRecord(rowData),
+                addRow: this.isAddRowRecord(rowData) ? rowData.addRow : false
             };
         }
     }
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html
@@ -47,6 +47,7 @@
         [ngClass]="col.cellClasses | igxCellStyleClasses:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
         [ngStyle]="col.cellStyles | igxCellStyles:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
         [editMode]="col.editable && crudService.isInEditMode(index, col.index)"
+        [addMode]="col.editable && crudService.isInAddMode(index,col.index)"
         [column]="col"
         [formatter]="col.formatter"
         [row]="this"
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html
@@ -165,7 +165,7 @@
 </div>
 
 <div class="igx-grid__addrow-snackbar">
-    <igx-snackbar #addRowSnackbar [actionText]="snackbarActionText" displayTime='2000'>{{snackbarLabel}}</igx-snackbar>
+    <igx-snackbar #addRowSnackbar [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
 </div>
 
 <div class="igx-grid__footer" #footer>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -429,6 +429,11 @@ export class AppComponent implements OnInit {
             icon: 'edit',
             name: 'Hierarchical Grid Updating'
         },
+        {
+            link: '/hierarchicalGridAddRow',
+            icon: 'view_column',
+            name: 'HierarchicalGrid Add Row'
+        },
         {
             link: '/treeGrid',
             icon: 'view_column',
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -134,6 +134,7 @@ import { GridNestedPropsSampleComponent } from './grid-nested-props/grid-nested-
 import { GridColumnActionsSampleComponent } from './grid-column-actions/grid-column-actions.sample';
 import { IgxColumnGroupingDirective } from './grid-column-actions/custom-action-directive';
 import { GridAddRowSampleComponent } from './grid-add-row/grid-add-row.sample';
+import { HierarchicalGridAddRowSampleComponent } from './hierarchical-grid-add-row/hierarchical-grid-add-row.sample';
 
 const components = [
     ActionStripSampleComponent,
@@ -194,6 +195,7 @@ const components = [
     GridCellEditingComponent,
     GridSampleComponent,
     GridAddRowSampleComponent,
+    HierarchicalGridAddRowSampleComponent,
     TreeGridAddRowSampleComponent,
     GridColumnMovingSampleComponent,
     GridColumnSelectionSampleComponent,
diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts
@@ -78,6 +78,7 @@ import { GridVirtualizationScrollSampleComponent } from './grid-remote-virtualiz
 import { GridNestedPropsSampleComponent } from './grid-nested-props/grid-nested-props.sample';
 import { GridColumnActionsSampleComponent } from './grid-column-actions/grid-column-actions.sample';
 import { GridAddRowSampleComponent } from './grid-add-row/grid-add-row.sample';
+import { HierarchicalGridAddRowSampleComponent } from './hierarchical-grid-add-row/hierarchical-grid-add-row.sample';
 
 const appRoutes = [
     {
@@ -263,6 +264,10 @@ const appRoutes = [
         path: 'gridAddRow',
         component: GridAddRowSampleComponent
     },
+    {
+        path: 'hierarchicalGridAddRow',
+        component: HierarchicalGridAddRowSampleComponent
+    },
     {
         path: 'treeGridAddRow',
         component: TreeGridAddRowSampleComponent
diff --git a/src/app/hierarchical-grid-add-row/hierarchical-grid-add-row.sample.html b/src/app/hierarchical-grid-add-row/hierarchical-grid-add-row.sample.html
@@ -0,0 +1,16 @@
+<igx-hierarchical-grid [showExpandAll]='true' [data]="localData" [autoGenerate]="true" [height]="'600px'"
+[width]="'800px'" #hGrid
+[primaryKey]="'ID'"
+(mouseleave)="onMouseLeave(actionstrip)"
+(mouseover)="onMouseOver($event, hGrid, actionstrip)"
+[rowEditable]="true">
+<igx-action-strip #actionstrip>
+    <igx-grid-editing-actions [addRow]="true"></igx-grid-editing-actions>
+</igx-action-strip>
+<igx-row-island #island [key]="'childData'" [autoGenerate]="true"
+    [allowFiltering]='true' [rowEditable]="true" [primaryKey]="'ID'">
+    <igx-row-island [key]="'childData'" [autoGenerate]="true"
+        [allowFiltering]='true'></igx-row-island>
+</igx-row-island>
+<igx-row-island [key]="'childData2'" [autoGenerate]="true" [allowFiltering]='true'></igx-row-island>
+</igx-hierarchical-grid>
diff --git a/src/app/hierarchical-grid-add-row/hierarchical-grid-add-row.sample.ts b/src/app/hierarchical-grid-add-row/hierarchical-grid-add-row.sample.ts
@@ -0,0 +1,80 @@
+import { Component, ViewChild, ChangeDetectorRef, AfterViewInit } from '@angular/core';
+import {
+    IgxHierarchicalGridComponent,
+} from 'igniteui-angular';
+
+@Component({
+    selector: 'app-hierarchical-grid-add-row-sample',
+    templateUrl: 'hierarchical-grid-add-row.sample.html'
+})
+export class HierarchicalGridAddRowSampleComponent implements AfterViewInit {
+    localData = [];
+
+    public columns;
+    public childColumns;
+
+
+    @ViewChild('hGrid', { static: true })
+    hGrid: IgxHierarchicalGridComponent;
+
+
+
+    constructor(private cdr: ChangeDetectorRef) {
+        this.localData = this.generateDataUneven(100, 3);
+        this.localData[0].hasChild = false;
+        this.localData[1].hasChild = false;
+        this.localData[2].childData[0].hasChild = false;
+        this.localData[2].childData[1].hasChild = false;
+    }
+
+
+    ngAfterViewInit() {
+        this.cdr.detectChanges();
+    }
+
+
+    generateDataUneven(count: number, level: number, parendID: string = null) {
+        const prods = [];
+        const currLevel = level;
+        let children;
+        for (let i = 0; i < count; i++) {
+            const rowID = parendID ? parendID + i : i.toString();
+            if (level > 0) {
+                // Have child grids for row with even id less rows by not multiplying by 2
+                children = this.generateDataUneven(((i % 2) + 1) * Math.round(count / 3), currLevel - 1, rowID);
+            }
+            prods.push({
+                ID: rowID,
+                ChildLevels: currLevel,
+                ProductName: 'Product: A' + i,
+                Col1: i,
+                Col2: i,
+                Col3: i,
+                childData: children,
+                childData2: i % 2 ? [] : children,
+                hasChild: true
+            });
+        }
+        return prods;
+    }
+
+
+
+    onMouseOver(event,  hierarchicalGrid, actionStrip) {
+        const target = event.target;
+        if (target.nodeName.toLowerCase() === 'igx-hierarchical-grid-cell') {
+            const gridId = target.parentNode.parentNode.attributes['ng-reflect-grid-i-d'].value;
+            const grid = hierarchicalGrid.hgridAPI.getChildGrids(true)
+                .find(childGrid => childGrid.id === gridId) ||  hierarchicalGrid;
+            const rowIndex = parseInt(target.attributes['data-rowindex'].value, 10);
+            const row = grid.getRowByIndex(rowIndex);
+            actionStrip.show(row);
+        }
+    }
+
+    onMouseLeave(actionstrip, event?) {
+        if (!event || event.relatedTarget.nodeName.toLowerCase() !== 'igx-drop-down-item') {
+            actionstrip.hide();
+        }
+    }
+}
diff --git a/src/app/routing.ts b/src/app/routing.ts
@@ -110,6 +110,7 @@ import { GridVirtualizationScrollSampleComponent } from './grid-remote-virtualiz
 import { GridNestedPropsSampleComponent } from './grid-nested-props/grid-nested-props.sample';
 import { GridColumnActionsSampleComponent } from './grid-column-actions/grid-column-actions.sample';
 import { GridAddRowSampleComponent } from './grid-add-row/grid-add-row.sample';
+import { HierarchicalGridAddRowSampleComponent } from './hierarchical-grid-add-row/hierarchical-grid-add-row.sample';
 
 const appRoutes = [
     {
@@ -350,6 +351,10 @@ const appRoutes = [
         path: 'gridAddRow',
         component: GridAddRowSampleComponent
     },
+    {
+        path: 'hierarchicalGridAddRow',
+        component: HierarchicalGridAddRowSampleComponent
+    },
     {
         path: 'treeGridAddRow',
         component: TreeGridAddRowSampleComponent

Original file line number	Diff line number	Diff line change
`@@ -548,10 +548,11 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti`
`548`	`548`	`}`
`549`	`549`	`} else {`
`550`	`550`	`return {`
`551`		`- $implicit: this.isGhostRecord(rowData) ? rowData.recordRef : rowData,`
	`551`	`+ $implicit: this.isGhostRecord(rowData) \|\| this.isAddRowRecord(rowData) ? rowData.recordRef : rowData,`
`552`	`552`	`templateID: 'dataRow',`
`553`	`553`	`index: this.getDataViewIndex(rowIndex, pinned),`
`554`		`- disabled: this.isGhostRecord(rowData)`
	`554`	`+ disabled: this.isGhostRecord(rowData),`
	`555`	`+ addRow: this.isAddRowRecord(rowData) ? rowData.addRow : false`
`555`	`556`	`};`
`556`	`557`	`}`
`557`	`558`	`}`