Provide a multiselection property to select more than one row (#2389)

This commit is contained in:
Maurizio Vitale 2017-09-29 17:07:41 +01:00 committed by Eugenio Romano
parent ae1c0a7bca
commit cf0b45acb6
3 changed files with 28 additions and 1 deletions

View File

@ -124,6 +124,8 @@ You can also use HTML-based schema declaration like shown below:
| page | number | 0 | The page of the tasks to fetch. | | page | number | 0 | The page of the tasks to fetch. |
| size | number | 5 | The number of tasks to fetch. | | size | number | 5 | The number of tasks to fetch. |
| assignment | string || The assignment of the process. <ul>Possible values are: <li>assignee : where the current user is the assignee</li> <li>candidate: where the current user is a task candidate </li><li>group_x: where the task is assigned to a group where the current user is a member of.</li> <li>no value: where the current user is involved</li> </ul> | | assignment | string || The assignment of the process. <ul>Possible values are: <li>assignee : where the current user is the assignee</li> <li>candidate: where the current user is a task candidate </li><li>group_x: where the task is assigned to a group where the current user is a member of.</li> <li>no value: where the current user is involved</li> </ul> |
| selectionMode | string | 'single' | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. |
| multiselect | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row |
| state | string || Define state of the processes. Possible values are: `completed`, `active` | | state | string || Define state of the processes. Possible values are: `completed`, `active` |
| hasIcon | boolean | true | Toggle the icon on the left . | | hasIcon | boolean | true | Toggle the icon on the left . |
| landingTaskId | string | | Define which task id should be selected after the reloading. If the task id doesn't exist or nothing is passed it will select the first task | | landingTaskId | string | | Define which task id should be selected after the reloading. If the task id doesn't exist or nothing is passed it will select the first task |
@ -136,6 +138,7 @@ You can also use HTML-based schema declaration like shown below:
| --- | --- | | --- | --- |
| onSuccess | Raised when the task list is loaded | | onSuccess | Raised when the task list is loaded |
| rowClick | Raised when the task in the list is clicked | | rowClick | Raised when the task in the list is clicked |
| rowsSelected | Raised when the a row is selected/unselected |
### Details ### Details

View File

@ -4,6 +4,10 @@
<adf-datatable <adf-datatable
[data]="data" [data]="data"
[loading]="isLoading" [loading]="isLoading"
[multiselect]="multiselect"
[selectionMode]="selectionMode"
(row-select)="onRowSelect($event)"
(row-unselect)="onRowUnselect($event)"
(rowClick)="onRowClick($event)"> (rowClick)="onRowClick($event)">
<loading-content-template> <loading-content-template>
<ng-template> <ng-template>

View File

@ -62,9 +62,18 @@ export class TaskListComponent implements OnChanges, OnInit, AfterContentInit {
@Input() @Input()
data: DataTableAdapter; data: DataTableAdapter;
@Input()
selectionMode: string = 'none'; // none|single|multiple
@Input()
multiselect: boolean = false;
@Output() @Output()
rowClick: EventEmitter<string> = new EventEmitter<string>(); rowClick: EventEmitter<string> = new EventEmitter<string>();
@Output()
rowsSelected: EventEmitter<any[]> = new EventEmitter<any[]>();
@Output() @Output()
onSuccess: EventEmitter<any> = new EventEmitter<any>(); onSuccess: EventEmitter<any> = new EventEmitter<any>();
@ -72,6 +81,7 @@ export class TaskListComponent implements OnChanges, OnInit, AfterContentInit {
onError: EventEmitter<any> = new EventEmitter<any>(); onError: EventEmitter<any> = new EventEmitter<any>();
currentInstanceId: string; currentInstanceId: string;
selectedInstances: any[];
@Input() @Input()
page: number = 0; page: number = 0;
@ -265,11 +275,21 @@ export class TaskListComponent implements OnChanges, OnInit, AfterContentInit {
* @param event * @param event
*/ */
onRowClick(event: DataRowEvent) { onRowClick(event: DataRowEvent) {
let item = event; const item = event;
this.currentInstanceId = item.value.getValue('id'); this.currentInstanceId = item.value.getValue('id');
this.rowClick.emit(this.currentInstanceId); this.rowClick.emit(this.currentInstanceId);
} }
onRowSelect(event: CustomEvent) {
this.selectedInstances = [...event.detail.selection];
this.rowsSelected.emit(this.selectedInstances);
}
onRowUnselect(event: CustomEvent) {
this.selectedInstances = [...event.detail.selection];
this.rowsSelected.emit(this.selectedInstances);
}
/** /**
* Optimize name field * Optimize name field
* @param istances * @param istances