Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use value instead of ngModel to update editValue for checkbox and calendar in igxCell #3307

Merged
merged 7 commits into from
Dec 7, 2018
Merged

Use value instead of ngModel to update editValue for checkbox and calendar in igxCell #3307

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a7ef9f0
fix(igxCell): Use value instead of ngModel (#2958)
dkamburov Nov 28, 2018
124660a
fix(igxCell): Expose and use getter and setter for editValue (#2958)
dkamburov Nov 29, 2018
a9b72a3
chore(igxCell): Fix failing test
dkamburov Nov 29, 2018
8650372
Merge branch 'master' into dkamburov/fix-2958-7.1.x
kdinev Dec 4, 2018
77da9f4
Merge branch 'master' into dkamburov/fix-2958-7.1.x
ddincheva Dec 5, 2018
9ebcb6f
Merge branch 'master' into dkamburov/fix-2958-7.1.x
rkaraivanov Dec 6, 2018
430fc02
Merge branch 'master' into dkamburov/fix-2958-7.1.x
mpavlinov Dec 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions projects/igniteui-angular/src/lib/grids/cell.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
35 changes: 28 additions & 7 deletions projects/igniteui-angular/src/lib/grids/cell.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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();
}
Expand All @@ -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;
Expand Down Expand Up @@ -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) {
Expand Down
8 changes: 4 additions & 4 deletions projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down