X

Geertjan's Blog

  • January 4, 2016

Selecting a Row in Oracle JET ojTable (Part 3)

Geertjan Wielenga
Product Manager

Following on from part 2, our requirements have now changed. Instead of showing the values of the selected row below the table, we want to remove the table when a row has been selected and replace that table with a new table that shows detailed information about the selected row. I'm not going to address the question of whether this is good UI design, since I have a feeling that rather than removing the table, you'd want the second table to appear below the first, to show the details of the row selected in the master table. There, I addressed the question of UI design after all.

Anyway, let's implement the requirement as given. The beautiful thing about Oracle JET is that it's all Knockout right the way through, i.e., the solution is not specific to Oracle JET—because Knockout runs right the way through it. 

Start by using the "visible" binding, as follows. 

<div data-bind="visible: showMainTable">
<table data-bind="ojComponent: {component: 'ojTable',
beforecurrentrow: currentRowListener,
data: datasource,
columns: [
{headerText: 'Id', field: 'DepartmentId'},
{headerText: 'Name', field: 'DepartmentName'}]
}">
</table>
</div>

Now, back in the JavaScript side of your module, right beneath the "var self = this", add this statement:

self.showMainTable = ko.observable(true); 

Next, toggle the "showMainTable" observable whenever a row is selected, i.e., in the listener that is assigned to the "beforecurrentrow" event:

self.currentRowListener = function (event, ui) {
var newCurrentRow = ui.currentRow;
self.datasource.at(newCurrentRow['rowIndex']).
then(function (rowObj) {
var obj = rowObj['data'];
self.showMainTable(false);
$('#selectedDepartmentId').text(obj.DepartmentId);
$('#selectedDepartmentName').text(obj.DepartmentName);
});
};

OK, right now, you've hidden the table whenever a row is selected. 

Go back to your HTML file, copy everything in the DIV that makes use of the "visible" binding and bind it to "showDetailTable". In the JavaScript file, define that observable property as being initially false. Then set it to true at the point where you're setting the main table to false. Finally, replace the content of the "datasource" variable with the content you'd like to have populate the details table.

That should be all that needs to be done to meet the new requirements. 

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.