Multiple row selection in ojTable using Oracle JET 4.0

I originally wrote this blog post using v3 of JET, and just as I was about to publish, v4 was released. I have therefore updated it to work with the v4 updates. If anyone wanted to see the v3 content — please get in touch!

This article will outline the steps needed to retrieve the row selection information from an ojTable, within an Oracle JET application. In the examples used within this post, I am using the basic ojTable from the Oracle Cookbook, which is currently on the newly released version 4 of Oracle JET.

Assuming you have your ojTable setup, first create a button on your page which will be used to invoke the actions needed on your selected rows, eg:

view

<oj-button id='button1' on-click='[[buttonClick]]'>Process Departments</oj-button>

viewModel

this.buttonClick = function () {
   // Our process code will go here
}

See the screenshot below, here we have selected two chunks of rows; 0 to 3 (4 rows) and 5 to 6 (two rows):

Table selection of rows 0–3 and 5–6

To output the selected rows, you simply have to bind to the table as follows:

// Get the selected rows from the table
   var getSelectedRows = document.getElementById('table').selection;

Output of getSelectedRows

Now that we know how to get the selected row index’s, we need to include the button click logic to find the selected data and process it.

Create an obserable array globally in your viewModel:

self.selectedDepartments = ko.observableArray();

Then add the following logic into your buttonClick function:

this.buttonClick = function () {
   // Get the selected rows from the table
   var getSelectedRows = document.getElementById('table').selection;
   // Ensure the selected departments array is clear
   self.selectedDepartments.removeAll()
   // Loop through the selected rows
   $.each(getSelectedRows, function (key, value) {
     // Retrieve the table row data
     var itemModel = self.datasource.data;
     // Loop through the row data between the start and end indexes
     for (var n = value.startIndex.row; n <= value.endIndex.row;     ++n) {
       if (itemModel.length > 0) {
           var modelObject = itemModel[n]
           // Add the selected departments to an array
          self.selectedDepartments.push({
            depId: modelObject.DepartmentId,
            depName: modelObject.DepartmentName,
            locId: modelObject.LocationId,
            mngId: modelObject.ManagerId
          });
       }
    }
   });
  /*
  Here you can use the contents of self.selectedDepartments to  process actions on the selected rows.
  */
  console.log(self.selectedDepartments);
}

All of the selected row data is stored within self.selectedEmployees, which can be processed as required.

For my example I do not have any process logic, so I have just outputted the contents of the selectedEmployees array when my button is clicked:

Output of selected rows

References

• Basic ojTable Cookbook: http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=table&demo=basicTable
• ojTable selection attribute: http://docs.oracle.com/middleware/jet400/jet/reference-jet/oj.ojTable.html#selection

Further Reading

Row selection using arrow keys in Oracle Jet — https://medium.com/@andrewpbennett92/oracle-jet-table-row-selection-using-arrow-keys-eb8cf8d5f30a

Appendix

view code

<oj-button id='button1' on-click='[[buttonClick]]'>Process Departments</oj-button><br><br>
<span data-bind="visible: selectedDepartments().length">Processed the following departments:</span>
<ul data-bind="foreach: selectedDepartments()">
<li>
<span data-bind="text: depId"> </span> -
<span data-bind="text: depName"> </span>
</li>
</ul><br>
<oj-table id='table' aria-label='Departments Table' selection-mode='{"row": "multiple", "column": "multiple"}'  data='[[datasource]]' columns-default.sortable='disabled' columns='[{"headerText": "Department Id",
"field": "DepartmentId"},
{"headerText": "Department Name",
"field": "DepartmentName"},
{"headerText": "Location Id",
"field": "LocationId"},
{"headerText": "Manager Id",
"field": "ManagerId"}]'>
</oj-table>