X

Geertjan's Blog

  • January 2, 2016

Selecting a Node in Oracle JET ojTree

Geertjan Wielenga
Product Manager

We've looked at selecting a row in an ojTable, by making use of the "beforecurrentrow" event callback as an ojComponent binding property. Let's do the same now for an ojTree, again in a custom module, i.e., using a 'define' block instead of a 'require' block as done in the Oracle JET Cookbook

For this simple scenario, whenever a node is selected, an H2 below the tree appears, showing information about the current selection, i.e., you can see above that 'News' is selected and hence the H2 below the tree reflects that selection. 

Here's the ojTree in the HTML side of our custom module:

<div data-bind="ojComponent: {component: 'ojTree', before: currentRowListener, 
data: datasource
}">
</div>
<hr>
<h2><span id="selectedNode"></span></h2>

The key to this blog entry is the "before" property that you see above, in bold. In the code completion in NetBeans IDE, you will not be offered that property, because right now (and I think this should be a new enhancement request), event callbacks are not shown as potential properties to be used, i.e., you'll not see 'before' in the code completion, even though it is in the list of events, as can be seen in the ojTree javadoc. The rule is that all event callbacks should be available as properties.

Now that we've assigned our event listener as shown above, rather than in the way described in the Oracle JET Cookbook where JQuery is used directly after the 'ko.applyBindings', we can use 'func' and 'item' on the 'ui' returned to us in the callback handler, as described in the 'before' javadoc:

define(['ojs/ojcore', 'knockout',
'ojs/ojknockout', 'ojs/ojtree'
], function (oj, ko) {
function homeContentViewModel() {
var self = this;
self.datasource = [
{"title": "Home", "attr": {"id": "home"},
"children": [
{"title": "Overview", "attr": {"id": "overview"}},
{"title": "Section1", "attr": {"id": "section1"}},
{"title": "Section2", "attr": {"id": "section2"}}
]
},
{"title": "News", "attr": {"id": "news"}},
{"title": 'Contact', "attr": {"id": "contact"}},
{"title": 'About', "attr": {"id": "about"}}
];
self.currentRowListener = function (event, ui) {
if (ui.func === 'select') {
var selectedNode = _arrayToStr(ui.item);
$('#selectedNode').text(selectedNode);
}
};
}
function _arrayToStr(arr) {
var s = "";
$.each(arr, function (i, val) {
if (i) {
s += ", ";
}
s += $(arr[i]).attr("id");
});
return s;
};
return homeContentViewModel;
});

The '_arrayToStr' function is a bit clunky, though it comes directly from the abovementioned javadoc and is the current best way of retrieving our 'id', or whatever we need, from the 'ui.item'.

With the above, we have everything we need to hook up a listener to an 'ojTree' and respond to the 'selection' event by retrieving relevant information from the current selection. 

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.