diff --git a/docs/datatable.component.md b/docs/datatable.component.md index 883bc1c343..5c3d746a4b 100644 --- a/docs/datatable.component.md +++ b/docs/datatable.component.md @@ -169,6 +169,7 @@ These events bubble up the component tree and can be handled by any parent compo | row-dblclick | Raised when user double-clicks a row | | row-select | Raised after user selects a row | | row-unselect | Raised after user unselects a row | +| row-keyup | Raised on the 'keyup' event for the focused row. | For example: @@ -288,6 +289,18 @@ Note: the `` and `` can be used t ### Events +#### row-keyup DOM event + +Raised on the 'keyup' event for the focused row. + +This is an instance of the `CustomEvent` with the `details` property containing the following object: + +```ts +row: DataRow, +keyboardEvent: KeyboardEvent, +sender: any +``` + #### rowClick event Emitted when user clicks a row. diff --git a/ng2-components/ng2-activiti-tasklist/src/components/tasklist.component.html b/ng2-components/ng2-activiti-tasklist/src/components/tasklist.component.html index 488d565039..3cb2676dc9 100644 --- a/ng2-components/ng2-activiti-tasklist/src/components/tasklist.component.html +++ b/ng2-components/ng2-activiti-tasklist/src/components/tasklist.component.html @@ -8,7 +8,8 @@ [selectionMode]="selectionMode" (row-select)="onRowSelect($event)" (row-unselect)="onRowUnselect($event)" - (rowClick)="onRowClick($event)"> + (rowClick)="onRowClick($event)" + (row-keyup)="onRowKeyUp($event)"> diff --git a/ng2-components/ng2-activiti-tasklist/src/components/tasklist.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/tasklist.component.ts index e064f77d3b..7621ac81cc 100644 --- a/ng2-components/ng2-activiti-tasklist/src/components/tasklist.component.ts +++ b/ng2-components/ng2-activiti-tasklist/src/components/tasklist.component.ts @@ -270,12 +270,7 @@ export class TaskListComponent implements OnChanges, OnInit, AfterContentInit { (this.data && this.data.getRows() && this.data.getRows().length === 0); } - /** - * Emit the event rowClick passing the current task id when the row is clicked - * @param event - */ - onRowClick(event: DataRowEvent) { - const item = event; + onRowClick(item: DataRowEvent) { this.currentInstanceId = item.value.getValue('id'); this.rowClick.emit(this.currentInstanceId); } @@ -290,6 +285,14 @@ export class TaskListComponent implements OnChanges, OnInit, AfterContentInit { this.rowsSelected.emit(this.selectedInstances); } + onRowKeyUp(event: CustomEvent) { + if (event.detail.keyboardEvent.key === 'Enter') { + event.preventDefault(); + this.currentInstanceId = event.detail.row.getValue('id'); + this.rowClick.emit(this.currentInstanceId); + } + } + /** * Optimize name field * @param istances diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html index ae689379c6..6a1e05d2d5 100644 --- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html +++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html @@ -42,7 +42,7 @@ [adf-upload]="allowDropFiles && rowAllowsDrop(row)" [adf-upload-data]="row" [ngStyle]="rowStyle" [ngClass]="getRowStyle(row)" - (keyup.enter)="onKeyboardNavigate(row, $event)"> + (keyup)="onRowKeyUp(row, $event)"> diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts index 47c0a4da0c..6c5f3274c9 100644 --- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts +++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts @@ -73,19 +73,19 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck showHeader: boolean = true; @Output() - rowClick: EventEmitter = new EventEmitter(); + rowClick = new EventEmitter(); @Output() - rowDblClick: EventEmitter = new EventEmitter(); + rowDblClick = new EventEmitter(); @Output() - showRowContextMenu: EventEmitter = new EventEmitter(); + showRowContextMenu = new EventEmitter(); @Output() - showRowActionsMenu: EventEmitter = new EventEmitter(); + showRowActionsMenu = new EventEmitter(); @Output() - executeRowAction: EventEmitter = new EventEmitter(); + executeRowAction = new EventEmitter(); @Input() loading: boolean = false; @@ -282,10 +282,32 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck this.clickObserver.next(dataRowEvent); } - onKeyboardNavigate(row: DataRow, e: KeyboardEvent) { + onRowKeyUp(row: DataRow, e: KeyboardEvent) { + const event = new CustomEvent('row-keyup', { + detail: { + row: row, + keyboardEvent: e, + sender: this + }, + bubbles: true + }); + + this.elementRef.nativeElement.dispatchEvent(event); + + if (event.defaultPrevented) { + e.preventDefault(); + } else { + if (e.key === 'Enter') { + this.onKeyboardNavigate(row, e); + } + } + } + + private onKeyboardNavigate(row: DataRow, e: KeyboardEvent) { if (e) { e.preventDefault(); } + const event = new DataRowEvent(row, e, this); this.rowDblClick.emit(event);