Use value instead of ngModel to update editValue for checkbox and cal…

…endar in igxCell (#3224) * fix(igxCell): Use value instead of ngModel (#2958) * fix(igxCell): Add change and onSelection event to reflect value changes (#2958) * fix(igxCell): Add change and onSelection for tree-cell too (#2958) * fix(igxCell): Expose and use getter and setter for editValue (#2958) * chore(igxCell): Fix failing test
IgniteUI · Dec 6, 2018 · daaedc9 · daaedc9
1 parent 1ba7c91
commit daaedc9
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 11 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;

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">