diff --git a/packages/oui-datagrid/README.md b/packages/oui-datagrid/README.md
index a4efa896..d1fe6b50 100644
--- a/packages/oui-datagrid/README.md
+++ b/packages/oui-datagrid/README.md
@@ -91,6 +91,38 @@
Clicked row action 1: {{$ctrl.action1Row.lastName}}, {{$ctrl.action1Row.firstName}}
```
+### Selectable rows
+
+```html:preview
+
+
+
+
+ {{$row.parents.mother.lastName}}, {{$row.parents.mother.firstName}}
+
+
+ {{$row.parents.father.lastName}}, {{$row.parents.father.firstName}}
+
+
+ {{$ctrl.label}}: {{$value}}
+
+
+
+ {{$value|date:short}}
+
+
+ {{ $isSelected }}
+
+
+
+
+
+
+ You have selected {{ $selectedRows.length }} row(s).
+
+
+```
+
### Empty datagrid
```html:preview
@@ -656,6 +688,7 @@ call `rows-loader` and then a `row-loader` call for each line.
| `rows-loader` | function | &? | yes | | | gets all rows (returns a promise with all rows) |
| `row-loader` | function | &? | yes | | | gets row details (returns a promise with details) |
| `customizable` | boolean | | | | false | if the datagrid is customizable |
+| `selectable-rows` | boolean | | | | false | if rows can be selected
| `columns-parameters` | array | | | | undefined | columns parameters (see below) |
| `on-columns-parameters-change` | function | & | | | | triggered on column parameter change when datagrid is customizable |
diff --git a/packages/oui-datagrid/src/cell/cell.component.js b/packages/oui-datagrid/src/cell/cell.component.js
index cbe82b07..f2cf0a65 100644
--- a/packages/oui-datagrid/src/cell/cell.component.js
+++ b/packages/oui-datagrid/src/cell/cell.component.js
@@ -7,6 +7,7 @@ export default {
},
bindings: {
row: "<",
- column: "<"
+ column: "<",
+ index: ""
}
};
diff --git a/packages/oui-datagrid/src/cell/cell.controller.js b/packages/oui-datagrid/src/cell/cell.controller.js
index 46c57918..d17d3cdd 100644
--- a/packages/oui-datagrid/src/cell/cell.controller.js
+++ b/packages/oui-datagrid/src/cell/cell.controller.js
@@ -5,6 +5,10 @@ export default class {
this.$element = $element;
}
+ $onInit () {
+ this.index = this.index || 0;
+ }
+
$postLink () {
// The parent scope of datagrid is required to get parent
// values inside cells
@@ -19,6 +23,10 @@ export default class {
} else {
this._compileCell();
}
+
+ this.cellScope.$watch(() => this.datagridCtrl.selectedRows[this.index], (isSelected) => {
+ this.cellScope.$isSelected = isSelected || false;
+ });
}
$onChanges (changes) {
diff --git a/packages/oui-datagrid/src/datagrid.controller.js b/packages/oui-datagrid/src/datagrid.controller.js
index 024c1b2d..4d1dde80 100644
--- a/packages/oui-datagrid/src/datagrid.controller.js
+++ b/packages/oui-datagrid/src/datagrid.controller.js
@@ -35,6 +35,8 @@ export default class DatagridController {
this.columnElements = [];
this.actionColumnElements = [];
this.extraTopElements = [];
+ this.selectedRows = [];
+ this.selectAllRows = false;
this.config = ouiDatagridConfiguration;
@@ -69,6 +71,8 @@ export default class DatagridController {
this.filterableColumns = [];
this.criteria = [];
+ addBooleanParameter(this, "selectableRows");
+
if (this.id) {
this.ouiDatagridService.registerDatagrid(this);
}
@@ -103,7 +107,7 @@ export default class DatagridController {
}
// Manage responsiveness
- if (this.hasActionMenu || this.customizable) {
+ if (this.hasActionMenu || this.customizable || this.selectableRows) {
this.scrollablePanel = this.$element[0].querySelector(".oui-datagrid-responsive-container__overflow-container");
if (this.scrollablePanel) {
angular.element(this.$window).on("resize", this.checkScroll);
@@ -271,6 +275,9 @@ export default class DatagridController {
this.displayedRows = DatagridController.createEmptyRows(this.paging.getCurrentPageSize());
}
+ this.selectedRows = this.selectedRows.map(() => false);
+ this.selectAllRows = false;
+
this.refreshDatagridPromise = this.$q.when((callback || angular.noop)())
.then(() => this.paging.loadData(skipSortAndFilter, forceLoadRows))
.then(result => {
@@ -313,6 +320,37 @@ export default class DatagridController {
};
}
+ getSelectedRows () {
+ return this.selectedRows.reduce((result, isSelected, index) => {
+ if (isSelected) {
+ result.push(this.displayedRows[index]);
+ }
+ return result;
+ }, []);
+ }
+
+ toggleRowSelection (index, isSelected) {
+ const rowCount = this.displayedRows.length;
+ this.selectedRows[index] = isSelected;
+ const selectedRowsCount = this.getSelectedRows().length;
+
+ if (selectedRowsCount === rowCount) {
+ this.selectAllRows = true;
+ } else if (selectedRowsCount === 0) {
+ this.selectAllRows = false;
+ } else {
+ this.selectAllRows = null;
+ }
+ }
+
+ toggleAllRowsSelection (modelValue) {
+ if (modelValue === null) {
+ this.selectedRows = this.displayedRows.map(() => true);
+ } else {
+ this.selectedRows = this.displayedRows.map(() => modelValue);
+ }
+ }
+
static createEmptyRows (pageSize) {
return Array(...{ length: pageSize })
.map(() => undefined);
diff --git a/packages/oui-datagrid/src/datagrid.html b/packages/oui-datagrid/src/datagrid.html
index 807c41ff..ea03452a 100644
--- a/packages/oui-datagrid/src/datagrid.html
+++ b/packages/oui-datagrid/src/datagrid.html
@@ -18,18 +18,25 @@
items="$ctrl.appliedCriteria">