Skip to content

Commit

Permalink
Fixed #101
Browse files Browse the repository at this point in the history
  • Loading branch information
Çağatay Çivici committed Mar 19, 2016
1 parent 1c9997f commit 1189966
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 11 deletions.
54 changes: 43 additions & 11 deletions components/datatable/datatable.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,13 +56,14 @@ import {DomHandler} from '../dom/domhandler';
(click)="onRowClick($event, rowData)" (dblclick)="rowDblclick($event,rowData)"
[ngClass]="{'ui-datatable-even':even,'ui-datatable-odd':odd,'ui-state-hover': (selectionMode && rowElement == hoveredRow), 'ui-state-highlight': isSelected(rowData)}">
<td *ngFor="#col of columns" [attr.style]="col.style" [attr.class]="col.styleClass"
[ngClass]="{'ui-editable-column':col.editable}" (click)="switchCellToEditMode($event.target,col)">
[ngClass]="{'ui-editable-column':col.editable}" (click)="switchCellToEditMode($event.target,col,rowData)">
<span class="ui-column-title" *ngIf="responsive">{{col.header}}</span>
<span class="ui-cell-data" *ngIf="!col.template">{{rowData[col.field]}}</span>
<span class="ui-cell-data" *ngIf="col.template">
<p-columnTemplateLoader [column]="col" [rowData]="rowData"></p-columnTemplateLoader>
</span>
<input type="text" class="ui-cell-editor ui-state-highlight" *ngIf="col.editable" [(ngModel)]="rowData[col.field]" (blur)="switchCellToViewMode($event.target)" (keydown)="onCellEditorKeydown($event)"/>
<input type="text" class="ui-cell-editor ui-state-highlight" *ngIf="col.editable" [(ngModel)]="rowData[col.field]"
(blur)="switchCellToViewMode($event.target,col,rowData,true)" (keydown)="onCellEditorKeydown($event, col, rowData)"/>
</td>
</tr>
</tbody>
Expand Down Expand Up @@ -92,10 +93,11 @@ import {DomHandler} from '../dom/domhandler';
<tr #rowElement *ngFor="#rowData of dataToRender;#even = even; #odd = odd;" class="ui-widget-content" (mouseenter)="hoveredRow = $event.target" (mouseleave)="hoveredRow = null"
(click)="onRowClick($event, rowData)" (dblclick)="rowDblclick($event,rowData)"
[ngClass]="{'ui-datatable-even':even,'ui-datatable-odd':odd,'ui-state-hover': (selectionMode && rowElement == hoveredRow), 'ui-state-highlight': isSelected(rowData)}">
<td *ngFor="#col of columns" [attr.style]="col.style" [attr.class]="col.styleClass" [ngClass]="{'ui-editable-column':col.editable}" (click)="switchCellToEditMode($event.target,col)">
<td *ngFor="#col of columns" [attr.style]="col.style" [attr.class]="col.styleClass" [ngClass]="{'ui-editable-column':col.editable}" (click)="switchCellToEditMode($event.target,col,rowData)">
<span class="ui-column-title" *ngIf="responsive">{{col.header}}</span>
<span class="ui-cell-data">{{rowData[col.field]}}</span>
<input type="text" class="ui-cell-editor ui-state-highlight" *ngIf="col.editable" [(ngModel)]="rowData[col.field]" (blur)="switchCellToViewMode($event.target)" (keydown)="onCellEditorKeydown($event)"/>
<input type="text" class="ui-cell-editor ui-state-highlight" *ngIf="col.editable" [(ngModel)]="rowData[col.field]"
(blur)="switchCellToViewMode($event.target,col,rowData,true)" (keydown)="onCellEditorKeydown($event,col,rowData)"/>
</td>
</tr>
</tbody>
Expand Down Expand Up @@ -178,6 +180,14 @@ export class DataTable implements AfterViewChecked,AfterViewInit,OnInit,DoCheck

@Input() multiSortMeta: SortMeta[];

@Output() onEditInit: EventEmitter<any> = new EventEmitter();

@Output() onEditComplete: EventEmitter<any> = new EventEmitter();

@Output() onEdit: EventEmitter<any> = new EventEmitter();

@Output() onEditCancel: EventEmitter<any> = new EventEmitter();

@ContentChild(Header) header;

@ContentChild(Footer) footer;
Expand All @@ -204,6 +214,8 @@ export class DataTable implements AfterViewChecked,AfterViewInit,OnInit,DoCheck

globalFilterFunction: any;

preventBlurOnEdit: boolean;

constructor(private el: ElementRef, private domHandler: DomHandler, differs: IterableDiffers, @Query(Column) cols: QueryList<Column>,private renderer: Renderer) {
this.differ = differs.find([]).create(null);
cols.changes.subscribe(_ => {
Expand Down Expand Up @@ -659,8 +671,9 @@ export class DataTable implements AfterViewChecked,AfterViewInit,OnInit,DoCheck
}
}

switchCellToEditMode(element: any, column: Column) {
switchCellToEditMode(element: any, column: Column, rowData: any) {
if(!this.selectionMode && this.editable && column.editable) {
this.onEditInit.next({column: column, data: rowData});
let cell = this.findCell(element);
if(!this.domHandler.hasClass(cell, 'ui-cell-editing')) {
this.domHandler.addClass(cell, 'ui-cell-editing');
Expand All @@ -670,18 +683,37 @@ export class DataTable implements AfterViewChecked,AfterViewInit,OnInit,DoCheck
}
}

switchCellToViewMode(element: any) {
switchCellToViewMode(element: any, column: Column, rowData: any, complete: boolean) {
if(this.editable) {
let cell = this.findCell(element);
this.domHandler.removeClass(cell, 'ui-cell-editing');
this.domHandler.removeClass(cell, 'ui-state-highlight');
if(this.preventBlurOnEdit) {
this.preventBlurOnEdit = false;
}
else {
if(complete)
this.onEditComplete.next({column: column, data: rowData});
else
this.onEditCancel.next({column: column, data: rowData});

let cell = this.findCell(element);
this.domHandler.removeClass(cell, 'ui-cell-editing');
this.domHandler.removeClass(cell, 'ui-state-highlight');
}
}
}

onCellEditorKeydown(event) {
onCellEditorKeydown(event, column: Column, rowData: any) {
if(this.editable) {
this.onEdit.next({originalEvent: event,column: column, data: rowData});

//enter
if(event.keyCode == 13) {
this.switchCellToViewMode(event.target);
this.switchCellToViewMode(event.target, column, rowData, true);
this.preventBlurOnEdit = true;
}
//escape
if(event.keyCode == 27) {
this.switchCellToViewMode(event.target, column, rowData, false);
this.preventBlurOnEdit = true;
}
}
}
Expand Down
25 changes: 25 additions & 0 deletions showcase/demo/datatable/datatabledemo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -783,6 +783,31 @@ <h3>Events</h3>
filters: FilterMetadata object having field as key and filter value, filter matchMode as value</td>
<td>Callback to invoke when paging, sorting or filtering happens in lazy mode.</td>
</tr>
<tr>
<td>onEditInit</td>
<td>event.column: Column object of the cell<br>
event.data: Row data</td>
<td>Callback to invoke when a cell switches to edit mode.</td>
</tr>
<tr>
<td>onEdit</td>
<td>event.originalEvent: Browser event
event.column: Column object of the cell<br>
event.data: Row data</td>
<td>Callback to invoke when cell data is being edited.</td>
</tr>
<tr>
<td>onEditComplete</td>
<td>event.column: Column object of the cell<br>
event.data: Row data</td>
<td>Callback to invoke when cell edit is completed.</td>
</tr>
<tr>
<td>onEditCancel</td>
<td>event.column: Column object of the cell<br>
event.data: Row data</td>
<td>Callback to invoke when cell edit is cancelled with escape key.</td>
</tr>
</tbody>
</table>
</div>
Expand Down

0 comments on commit 1189966

Please sign in to comment.