X

Shay Shmeltzer's Oracle Development Tools Tips

Working with Multiple Row Selection Tables in Visual Builder

Shay Shmeltzer
Director of Product Management - Oracle

The Oracle JET table component allows you to select multiple records in one go using the regular ctrl & shift key combinations. But once the user selected rows, how do you know which rows were selected? How do you track this?

The video below shows you the basics. As the JET tag documentation will show you, the table has a selection property which is an array of the selected records. This selections array is passed to the selection event on the table that you can hook to in with an action chain in VBCS. The array has a row for each range of records you selected listing their keys and indexes in the table.

It's up to you to parse this information if you want to operate on these rows.

The code in the JavaScript method is:

 

  PageModule.prototype.listSelection = function(selection) {
    console.log("we got " + selection.length + " selections")
    for (var i = 0; i < selection.length; i++) {
      console.log("start key " + selection[i].startKey.row +
        ", start index " + +selection[i].startIndex.row);
      console.log("end key " + selection[i].endKey.row + ", end index " +
        +selection[i].endIndex.row);
    }
  }

If you now want to access the values of the selected rows you can use the getDataForVisibleRow function of the oj-table that returns a data object with the content of the row. The code below shows you how to add that section to your code, printing out the name of each employee that was selected.

  PageModule.prototype.listSelection = function(selection) {
    console.log("we got " + selection.length + "selections ")
    for (var i = 0; i < selection.length; i++) {
      console.log("start key " + selection[i].startKey.row +
        ", start index " + +selection[i].startIndex.row);
      console.log("end key " + selection[i].endKey.row + ", end index " +
        +selection[i].endIndex.row);
        //The following loop prints the names
      for (var j = selection[i].startIndex.row; j <= selection[i].endIndex
        .row; j++) {
        var rowdata = document.getElementById("mytable").getDataForVisibleRow(j);
        console.log(rowdata.data.name)
      }
    }
  }

 

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.Captcha