Merge pull request #3307 from IgniteUI/dkamburov/fix-2958-7.1.x

Use value instead of ngModel to update editValue for checkbox and calendar in igxCell
IgniteUI · Dec 7, 2018 · 5f71cbf · 5f71cbf
2 parents 15316e2 + 430fc02
commit 5f71cbf
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 15 deletions.
diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.html b/projects/igniteui-angular/src/lib/grids/cell.component.html
@@ -10,19 +10,19 @@
 <ng-template #inlineEditor  let-cell="cell">
     <ng-container *ngIf="column.dataType === 'string'">
         <igx-input-group displayDensity="compact">
-            <input igxInput [(ngModel)]="gridAPI.get_cell_inEditMode(gridID).cell.editValue" [igxFocus]="focused">
+            <input igxInput [(ngModel)]="editValue" [igxFocus]="focused">
         </igx-input-group>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'number'">
         <igx-input-group displayDensity="compact">
-            <input igxInput [(ngModel)]="gridAPI.get_cell_inEditMode(gridID).cell.editValue" [igxFocus]="focused" type="number">
+            <input igxInput [(ngModel)]="editValue" [igxFocus]="focused" type="number">
         </igx-input-group>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'boolean'">
-        <igx-checkbox [(ngModel)]="gridAPI.get_cell_inEditMode(gridID).cell.editValue" [checked]="gridAPI.get_cell_inEditMode(gridID).cell.editValue" [igxFocus]="focused" [disableRipple]="true"></igx-checkbox>
+        <igx-checkbox (change)="editValue = $event.checked" [value]="editValue" [checked]="editValue" [igxFocus]="focused" [disableRipple]="true"></igx-checkbox>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'date'">
-        <igx-datePicker [(ngModel)]="gridAPI.get_cell_inEditMode(gridID).cell.editValue" [igxFocus]="focused" [labelVisibility]="false"></igx-datePicker>
+        <igx-datePicker (onSelection)="editValue = $event" [value]="editValue" [igxFocus]="focused" [labelVisibility]="false"></igx-datePicker>
     </ng-container>
 </ng-template>
 <ng-container *ngTemplateOutlet="template; context: context">

diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts
@@ -288,11 +288,11 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
             return;
         }
         if (this.column.editable && value) {
-            this.editValue = this.value;
             this.gridAPI.set_cell_inEditMode(this.gridID, this);
             if (this.highlight && this.grid.lastSearchInfo.searchText) {
                 this.highlight.observe();
             }
+            this.editValue = this.value;
         } else {
             this.gridAPI.escape_editMode(this.gridID, this.cellID);
         }
@@ -482,9 +482,30 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
     private highlight: IgxTextHighlightDirective;
 
     /**
-     * @hidden
+     * Sets the current edit value while a cell is in edit mode.
+     * Only for cell editing mode.
+     * ```typescript
+     * let isLastPinned = this.cell.isLastPinned;
+     * ```
+     * @memberof IgxGridCellComponent
      */
-    public editValue;
+    public set editValue(value) {
+        if (this.gridAPI.get_cell_inEditMode(this.gridID)) {
+            this.gridAPI.get_cell_inEditMode(this.gridID).cell.editValue = value;
+        }
+    }
+
+    /**
+     * Gets the current edit value while a cell is in edit mode.
+     * Only for cell editing mode.
+     * ```typescript
+     * let editValue = this.cell.editValue;
+     * ```
+     * @memberof IgxGridCellComponent
+     */
+    public get editValue() {
+        return this.gridAPI.get_cell_inEditMode(this.gridID).cell.editValue;
+    }
     public focused = false;
     protected isSelected = false;
     private cellSelectionID: string;
@@ -704,7 +725,7 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
             const column = this.gridAPI.get(this.gridID).columns[editCell.cellID.columnID];
 
             if (column.inlineEditorTemplate === undefined && (
-                (column.dataType === DataType.Boolean &&  (key !== KEYS.SPACE && key !== KEYS.SPACE_IE))
+                (column.dataType === DataType.Boolean && (key !== KEYS.SPACE && key !== KEYS.SPACE_IE))
                 || column.dataType === DataType.Date)) {
                 event.preventDefault();
             }
@@ -727,11 +748,11 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
                     (this.gridAPI as any).trigger_row_expansion_toggle(
                         this.gridID, this.row.treeRow, !this.row.expanded, event, this.visibleColumnIndex);
                 }
-            return;
+                return;
             }
         }
 
-        const args = {cell: this, groupRow: null, event: event, cancel: false };
+        const args = { cell: this, groupRow: null, event: event, cancel: false };
         this.grid.onFocusChange.emit(args);
         if (args.cancel) {
             return;
@@ -904,7 +925,7 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
      */
     public calculateSizeToFit(range: any): number {
         return Math.max(...Array.from(this.nativeElement.children)
-                   .map((child) => getNodeSizeViaRange(range, child)));
+            .map((child) => getNodeSizeViaRange(range, child)));
     }
 
     private isToggleKey(key) {

diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html
@@ -10,19 +10,19 @@
 <ng-template #inlineEditor  let-cell="cell">
     <ng-container *ngIf="column.dataType === 'string'">
         <igx-input-group>
-            <input igxInput [(ngModel)]="gridAPI.get_cell_inEditMode(gridID).cell.editValue" [igxFocus]="focused">
+            <input igxInput [(ngModel)]="editValue" [igxFocus]="focused">
         </igx-input-group>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'number'">
         <igx-input-group>
-            <input igxInput [(ngModel)]="gridAPI.get_cell_inEditMode(gridID).cell.editValue" [igxFocus]="focused"  type="number">
+            <input igxInput [(ngModel)]="editValue" [igxFocus]="focused"  type="number">
         </igx-input-group>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'boolean'">
-        <igx-checkbox [(ngModel)]="gridAPI.get_cell_inEditMode(gridID).cell.editValue" [checked]="gridAPI.get_cell_inEditMode(gridID).cell.editValue" [disableRipple]="true"></igx-checkbox>
+        <igx-checkbox (change)="editValue = $event.checked" [value]="editValue" [checked]="editValue" [disableRipple]="true"></igx-checkbox>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'date'">
-        <igx-datePicker [(ngModel)]="gridAPI.get_cell_inEditMode(gridID).cell.editValue" [labelVisibility]="false"></igx-datePicker>
+        <igx-datePicker (onSelection)="editValue = $event" [value]="editValue" [labelVisibility]="false"></igx-datePicker>
     </ng-container>
 </ng-template>
 <ng-container *ngIf="!inEditMode">