Merge branch 'master' into mkirova/expose-excel-filtering-template

Author: dkamburov

CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes for each version of this project will be documented in this
 - `igxGrid` - exposing new Input properties:
     - `excelStyleHeaderIconTemplate` - Gets/Sets the excel style header icon.
     - `groupRowTemplate` - Gets/Sets the template reference for the group row.
+    - `rowEditActionsTemplate` - Gets/Sets the row edit actions template.
+    - `rowAddTextTemplate` - Gets/Sets the row add text template.
+    - `rowEditTextTemplate` - Gets/Sets the row edit text template.
+    - `dragGhostCustomTemplate` - Gets/Sets the custom template used for row drag.
+    - `dragIndicatorIconTemplate` - Gets/Sets the custom template used for row drag indicator.
+    - `detailTemplate` - Gets/Sets the master-detail template.
 
 ## 14.2.0
 

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

@@ -1227,6 +1227,33 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     @ContentChildren(IgxRowDragGhostDirective, { read: TemplateRef, descendants: false })
     public dragGhostCustomTemplates: QueryList<TemplateRef<IgxGridRowDragGhostContext>>;
 
+
+    /**
+     * Gets the custom template, if any, used for row drag ghost.
+     */
+    @Input()
+    public get dragGhostCustomTemplate() {
+        return this._dragGhostCustomTemplate || this.dragGhostCustomTemplates.first;
+    }
+
+    /**
+     * Sets a custom template for the row drag ghost.
+     *```html
+     * <ng-template #template igxRowDragGhost>
+     *    <igx-icon>menu</igx-icon>
+     * </ng-template>
+     * ```
+     * ```typescript
+     * @ViewChild("'template'", {read: TemplateRef })
+     * public template: TemplateRef<any>;
+     * this.grid.dragGhostCustomTemplate = this.template;
+     * ```
+     */
+    public set dragGhostCustomTemplate(template: TemplateRef<IgxGridRowDragGhostContext>) {
+        this._dragGhostCustomTemplate = template;
+    }
+
+
     /**
      * @hidden @internal
      */
@@ -1332,18 +1359,90 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     @ContentChildren(IgxRowEditTextDirective, { descendants: false, read: TemplateRef })
     public rowEditTextDirectives: QueryList<TemplateRef<IgxGridRowEditTextTemplateContext>>;
 
+    /**
+     * Gets the row edit text template.
+     */
+    @Input()
+    public get rowEditTextTemplate(): TemplateRef<IgxGridRowEditTextTemplateContext> {
+        return this._rowEditTextTemplate || this.rowEditTextDirectives.first;
+    }
+    /**
+     * Sets the row edit text template.
+     *```html
+     * <ng-template #template igxRowEditText let-rowChangesCount>
+     * Changes: {{rowChangesCount}}
+     * </ng-template>
+     * ```
+     *```typescript
+     * @ViewChild('template', {read: TemplateRef })
+     * public template: TemplateRef<any>;
+     * this.grid.rowEditTextTemplate = this.template;
+     * ```
+     */
+    public set rowEditTextTemplate(template: TemplateRef<IgxGridRowEditTextTemplateContext>) {
+        this._rowEditTextTemplate = template;
+    }
+
     /**
      * @hidden @internal
      */
     @ContentChild(IgxRowAddTextDirective, { read: TemplateRef })
     public rowAddText: TemplateRef<IgxGridEmptyTemplateContext>;
 
+    /**
+     * Gets the row add text template.
+     */
+    @Input()
+    public get rowAddTextTemplate(): TemplateRef<IgxGridEmptyTemplateContext> {
+        return this._rowAddTextTemplate || this.rowAddText;
+    }
+    /**
+     * Sets the row add text template.
+     *```html
+     * <ng-template #template igxRowAddText>
+     * Adding Row
+     * </ng-template>
+     * ```
+     *```typescript
+     * @ViewChild('template', {read: TemplateRef })
+     * public template: TemplateRef<any>;
+     * this.grid.rowAddTextTemplate = this.template;
+     * ```
+     */
+    public set rowAddTextTemplate(template: TemplateRef<IgxGridEmptyTemplateContext>) {
+        this._rowAddTextTemplate = template;
+    }
+
     /**
      * @hidden @internal
      */
     @ContentChildren(IgxRowEditActionsDirective, { descendants: false, read: TemplateRef })
     public rowEditActionsDirectives: QueryList<TemplateRef<IgxGridRowEditActionsTemplateContext>>;
 
+    /**
+     * Gets the row edit actions template.
+     */
+    @Input()
+    public get rowEditActionsTemplate(): TemplateRef<IgxGridRowEditActionsTemplateContext> {
+        return this._rowEditActionsTemplate || this.rowEditActionsDirectives.first;
+    }
+    /**
+     * Sets the row edit actions template.
+     *```html
+     * <ng-template #template igxRowEditActions let-endRowEdit>
+     * <button igxButton igxRowEditTabStop (click)="endRowEdit(false)">Cancel</button>
+     * <button igxButton igxRowEditTabStop (click)="endRowEdit(true)">Apply</button>
+     * </ng-template>
+     * ```
+     *```typescript
+     * @ViewChild('template', {read: TemplateRef })
+     * public template: TemplateRef<any>;
+     * this.grid.rowEditActionsTemplate = this.template;
+     * ```
+     */
+    public set rowEditActionsTemplate(template: TemplateRef<IgxGridRowEditActionsTemplateContext>) {
+        this._rowEditActionsTemplate = template;
+    }
 
     /**
      * The custom template, if any, that should be used when rendering a row expand indicator.
@@ -2395,24 +2494,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     }
 
     /**
-     * @hidden @internal
-     */
-    public get rowEditText(): TemplateRef<IgxGridRowEditTextTemplateContext> {
-        if (this.rowEditTextDirectives && this.rowEditTextDirectives.first) {
-            return this.rowEditTextDirectives.first;
-        }
-        return null;
-    }
-
-    /**
-     * @hidden @internal
-     */
-    public get rowEditActions(): TemplateRef<IgxGridRowEditActionsTemplateContext> {
-        if (this.rowEditActionsDirectives && this.rowEditActionsDirectives.first) {
-            return this.rowEditActionsDirectives.first;
-        }
-        return null;
-    }
 
     /**
      * @hidden @internal
@@ -2424,10 +2505,24 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     /**
      * The custom template, if any, that should be used when rendering the row drag indicator icon
      */
+    @Input()
     public get dragIndicatorIconTemplate(): TemplateRef<IgxGridEmptyTemplateContext> {
         return this._customDragIndicatorIconTemplate || this.dragIndicatorIconTemplates.first;
     }
 
+    /**
+     * Sets a custom template that should be used when rendering the row drag indicator icon.
+     *```html
+     * <ng-template #template igxDragIndicatorIcon>
+     *    <igx-icon>expand_less</igx-icon>
+     * </ng-template>
+     * ```
+     * ```typescript
+     * @ViewChild("'template'", {read: TemplateRef })
+     * public template: TemplateRef<any>;
+     * this.grid.dragIndicatorIconTemplate = this.template;
+     * ```
+     */
     public set dragIndicatorIconTemplate(val: TemplateRef<IgxGridEmptyTemplateContext>) {
         this._customDragIndicatorIconTemplate = val;
     }
@@ -2899,6 +2994,10 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
 
     private _customDragIndicatorIconTemplate: TemplateRef<IgxGridEmptyTemplateContext>;
     private _excelStyleHeaderIconTemplate: TemplateRef<IgxGridHeaderTemplateContext>;
+    private _rowEditTextTemplate: TemplateRef<IgxGridRowEditTextTemplateContext>;
+    private _rowAddTextTemplate: TemplateRef<IgxGridEmptyTemplateContext>;
+    private _rowEditActionsTemplate: TemplateRef<IgxGridRowEditActionsTemplateContext>;
+    private _dragGhostCustomTemplate: TemplateRef<IgxGridRowDragGhostContext>;
     private _cdrRequests = false;
     private _resourceStrings;
     private _emptyGridMessage = null;
@@ -3789,11 +3888,8 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * @internal
      */
     public getDragGhostCustomTemplate() {
-        if (this.dragGhostCustomTemplates && this.dragGhostCustomTemplates.first) {
-            return this.dragGhostCustomTemplates.first;
-        }
 
-        return null;
+        return this.dragGhostCustomTemplate;
     }
 
     /**

projects/igniteui-angular/src/lib/grids/grid/grid-row-editing.spec.ts

@@ -22,7 +22,8 @@ import {
     IgxGridCustomOverlayComponent,
     IgxGridEmptyRowEditTemplateComponent,
     VirtualGridComponent,
-    ObjectCloneStrategy
+    ObjectCloneStrategy,
+    IgxGridCustomRowEditTemplateComponent
 } from '../../test-utils/grid-samples.spec';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -46,6 +47,7 @@ describe('IgxGrid - Row Editing #grid', () => {
                 IgxGridRowEditingWithoutEditableColumnsComponent,
                 IgxGridCustomOverlayComponent,
                 IgxGridEmptyRowEditTemplateComponent,
+                IgxGridCustomRowEditTemplateComponent,
                 VirtualGridComponent
             ],
             imports: [
@@ -2127,6 +2129,32 @@ describe('IgxGrid - Row Editing #grid', () => {
             cell = grid.getCellByColumn(0, 'ProductName');
             expect(cell.editMode).toBe(true);
         }));
+
+        it('should allow setting custom templates via Input.', () => {
+            const fix = TestBed.createComponent(IgxGridCustomRowEditTemplateComponent);
+            fix.detectChanges();
+            const grid = fix.componentInstance.grid;
+
+            grid.rowAddTextTemplate = fix.componentInstance.addText;
+            grid.rowEditTextTemplate = fix.componentInstance.editText;
+            grid.rowEditActionsTemplate = fix.componentInstance.editActions;
+            fix.detectChanges();
+
+            // enter edit mode
+            const cellElem = grid.gridAPI.get_cell_by_index(0, 'ProductName');
+            UIInteractions.simulateDoubleClickAndSelectEvent(cellElem);
+            fix.detectChanges();
+
+            expect(GridFunctions.getRowEditingBannerText(fix)).toBe('CUSTOM EDIT TEXT');
+            const bannerRow = GridFunctions.getRowEditingBannerRow(fix);
+            expect(bannerRow.textContent.trim()).toBe('CUSTOM EDIT ACTIONS');
+
+            grid.endEdit();
+
+            grid.beginAddRowByIndex(0);
+            fix.detectChanges();
+            expect(GridFunctions.getRowEditingBannerText(fix)).toBe('CUSTOM ADD TEXT');
+        });
     });
 
     describe('Transaction', () => {

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

@@ -124,7 +124,7 @@
                                 <div class="igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}"></div>
                         </ng-container>
                         <ng-template
-                    [ngTemplateOutlet]='detailTemplate.first'
+                    [ngTemplateOutlet]='detailTemplate'
                     [ngTemplateOutletContext]='getDetailsContext(rowData, rowIndex)'>
                     </ng-template>
                 </div>
@@ -252,15 +252,15 @@
     <div class="igx-banner__message">
         <span class="igx-banner__text">
             <ng-container
-                *ngTemplateOutlet="this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddText : rowEditText ? rowEditText : defaultRowEditText;
+                *ngTemplateOutlet="this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;
                 context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }">
             </ng-container>
         </span>
     </div>
     <div class="igx-banner__actions">
         <div class="igx-banner__row">
             <ng-container
-                *ngTemplateOutlet="rowEditActions ? rowEditActions : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }">
+                *ngTemplateOutlet="rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }">
             </ng-container>
         </div>
     </div>

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

@@ -154,8 +154,43 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
     /**
      * @hidden @internal
      */
-    @ContentChildren(IgxGridDetailTemplateDirective, { read: TemplateRef })
-    public detailTemplate: QueryList<TemplateRef<IgxGridMasterDetailContext>> = new QueryList();
+    @ContentChild(IgxGridDetailTemplateDirective, { read: TemplateRef })
+    public detailTemplateDirective: TemplateRef<IgxGridMasterDetailContext>;
+
+
+    /**
+     * Returns a reference to the master-detail template.
+     * ```typescript
+     * let detailTemplate = this.grid.detailTemplate;
+     * ```
+     *
+     * @memberof IgxColumnComponent
+     */
+    @Input('detailTemplate')
+    public get detailTemplate(): TemplateRef<IgxGridMasterDetailContext> {
+        return this._detailTemplate;
+    }
+    /**
+     * Sets the master-detail template.
+     * ```html
+     * <ng-template #detailTemplate igxGridDetail let-dataItem>
+     *    <div>
+     *       <div><span class='categoryStyle'>City:</span> {{dataItem.City}}</div>
+     *       <div><span class='categoryStyle'>Address:</span> {{dataItem.Address}}</div>
+     *    </div>
+     * </ng-template>
+     * ```
+     * ```typescript
+     * @ViewChild("'detailTemplate'", {read: TemplateRef })
+     * public detailTemplate: TemplateRef<any>;
+     * this.grid.detailTemplate = this.detailTemplate;
+     * ```
+     *
+     * @memberof IgxColumnComponent
+     */
+    public set detailTemplate(template: TemplateRef<IgxGridMasterDetailContext>) {
+        this._detailTemplate = template;
+    }
 
     /**
      * @hidden @internal
@@ -268,6 +303,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
     private _hideGroupedColumns = false;
     private _dropAreaMessage = null;
     private _showGroupArea = true;
+    private _detailTemplate;
 
     /**
      * Gets/Sets the array of data that populates the `IgxGridComponent`.
@@ -562,7 +598,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
      * @hidden @internal
      */
     public get hasDetails() {
-        return !!this.detailTemplate.length;
+        return !!this.detailTemplate;
     }
 
     /**
@@ -922,6 +958,10 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
             this._groupRowTemplate = this.groupTemplate.template;
         }
 
+        if (this.detailTemplateDirective) {
+            this._detailTemplate = this.detailTemplateDirective;
+        }
+
 
         if (this.hideGroupedColumns && this._columns && this.groupingExpressions) {
             this._setGroupColsVisibility(this.hideGroupedColumns);