X

Geertjan's Blog

  • December 31, 2015

Selecting a Row in Oracle JET ojTable (Part 1)

Geertjan Wielenga
Product Manager

Let's let the user select a row in an ojTable and display the related values.

There are two scenarios here. In the first, you've not created a custom module. Instead, you're using the 'main.js' and the 'index.html' files for all your code. Not ultimately what you want to do, though it's a start. Here it is:

<table id="table" 
data-bind="ojComponent: {component: 'ojTable',
data: datasource,
columns: [
{headerText: 'Id', field: 'DepartmentId'},
{headerText: 'Name', field: 'DepartmentName'}
]}">
</table>
<hr>
<span id="selectedDepartmentId"></span>
<span id="selectedDepartmentName"></span>

And here's the 'require' block in the 'main.js' file:

require(['ojs/ojcore', 'knockout', 'jquery', 
'ojs/ojknockout', 'ojs/ojmodule', 'ojs/ojtable'],
function (oj, ko)
{
function RootViewModel() {
var self = this;
var deptArray = [
{DepartmentId: 20, DepartmentName: 'History'},
{DepartmentId: 10, DepartmentName: 'Geography'},
{DepartmentId: 30, DepartmentName: 'Biology'}];
self.datasource =
new oj.ArrayTableDataSource(
deptArray,
{idAttribute: 'DepartmentId'});
}
var vm = new RootViewModel;
$(document).ready(
function () {
ko.applyBindings(vm);
$('#table').on(
'ojbeforecurrentrow',
currentRowListener);
}
);
function currentRowListener(event, ui) {
var newCurrentRow = ui.currentRow;
vm.datasource.at(newCurrentRow['rowIndex']).
then(function (rowObj) {
var obj = rowObj['data'];
$('#selectedDepartmentId').text(obj.DepartmentId);
$('#selectedDepartmentName').text(obj.DepartmentName);
});
}
}
);

The above is a simplified version of the code described here in the Cookboook.

Next, let's look at how the above would work within a custom module, i.e., using a 'define' block instead of a 'require' block. And... I don't know the answer to this yet.

The problem for me in the above code is here:

$(document).ready(
function () {
ko.applyBindings(vm);
$('#myTable').on(
'ojbeforecurrentrow',
currentRowListener);
}
);

As you can see, the event listener is being set right after the 'ko.applyBindings', which is all fine and good, and it works. However, I'd prefer to avoid using JQuery and, instead, use the 'event' binding provided by Knockout, which would be like this, notice the part in bold:

<table id="myTable" 
data-bind="event: {ojbeforecurrentrow: tableListener},
ojComponent: {component: 'ojTable',
selectionMode: {row: 'multiple', column: 'multiple'},
columnsDefault: {sortable: 'enabled'},
data: datasource,
columns: [
{headerText: 'Id', field: 'DepartmentId'},
{headerText: 'Name', field: 'DepartmentName'}
]}">
</table>

Then, back in my JavaScript, I would expect to be able to use this, i.e., I would expect to have access to the 'ui', which is the ojTable:

self.tableListener = function (event, ui) {
};

But, even though the event works, i.e., when I select a row, the event is called, I am not given access to the 'ui'. Instead I have this, since the 'ui' is not returned: the 'data' is returned, which is not what I want. I want to be able to call 'ui.currentRow', which I can't do right now because the listener is not returning the 'ui', i.e., the ojTable, and instead gives me the data:

self.tableListener = function (data, event) {
};

Were this to be possible, I'd be (1) be able to avoid JQuery, which is nice, i.e., I'd be able to use Knockout bindings throughout and (2) it would be simpler to set my event listeners because I'd do so in the HTML rather than in the JavaScript, so that I wouldn't need to do this during initialization, which I haven't been able to do in any other way than via JQuery.

Related references for the above, e.g., for relevant tables and events:

http://www.oracle.com/webfolder/technetwork/jet/uiComponents-table-eventTable.html
http://www.oracle.com/webfolder/technetwork/jet/uiComponents-table-selectableTable.

Note: The solution to the problem described above is in part 2.

Join the discussion

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