Introduction
This Process helps the user to create checkbox in Tree Region.
Procedure
Step 1
Create Tree Region
Sample code:
SELECT CASE WHEN CONNECT_BY_ISLEAF = 1 THEN 0
WHEN LEVEL = 1 THEN 1
ELSE -1
END AS status,
LEVEL,
Ename AS title,
NULL AS icon,
EMPNO AS VALUE,
NULL AS tooltip,NULL AS LINK
FROM EMP
START WITH “MGR” IS NULL
CONNECT BY NoCYCLE PRIOR “EMPNO” = “MGR”
Step 2
Assign Static ID to Tree region as Treestatic-id .
Step 3
Paste below code under Page Attributes -> Javascripts->Execute when Page Load.
Code :
regTree = apex.jQuery(“#Treestatic-id”).find(“div.tree”);
regTree.tree({
ui : {theme_name : “checkbox”},
callback : {
onchange : function(NODE, TREE_OBJ) {
if (TREE_OBJ.settings.ui.theme_name == “checkbox”) {
var $this = $(NODE).is(“li”) ? $(NODE) : $(NODE).parent();
if ($this.children(“a.unchecked”).size() == 0) {
TREE_OBJ.container.find(“a”).addClass(“unchecked”);
}
$this.children(“a”).removeClass(“clicked”);
if ($this.children(“a”).hasClass(“checked”)) {
$this.find(“li”).andSelf().children(“a”).removeClass(“checked”).removeClass(“undetermined”).addClass(“unchecked”);
var state = 0;
} else {
$this.find(“li”).andSelf().children(“a”).removeClass(“unchecked”).removeClass(“undetermined”).addClass(“checked”);
var state = 1;
}
$this.parents(“li”).each(function() {
if (state == 1) {
if ($(this).find(“a.unchecked, a.undetermined”).size() – 1 > 0) {
$(this).parents(“li”).andSelf().children(“a”).removeClass(“unchecked”).removeClass(“checked”).addClass(“undetermined”);
return false;
} else
$(this).children(“a”).removeClass(“unchecked”).removeClass(“undetermined”).addClass(“checked”);
} else {
if ($(this).find(“a.checked, a.undetermined”).size() – 1 > 0) {
$(this).parents(“li”).andSelf().children(“a”).removeClass(“unchecked”).removeClass(“checked”).addClass(“undetermined”);
return false;
} else
$(this).children(“a”).removeClass(“checked”).removeClass(“undetermined”).addClass(“unchecked”);}});}},onopen : function(NODE, TREE_OBJ) {
$(NODE).removeClass(“open”).addClass(“closed”);
},onclose : function(NODE, TREE_OBJ) {
$(NODE).removeClass(“closed”).addClass(“open”);
}}});
Tree region with checkbox:
Inspect checkbox “JONES”
Here column “EMPNO” from “Emp” table is the above “li id” ID value.
Step 4
Create Hidden Item to capture checked Value.
Item: P16_EMP_HID
Step 5
Create a button as SAVE (Define by dynamic action).
Step 6
Create a dynamic action
Event : Click
Selection_type : Button
Button : SAVE
Create a true action using below code under Execute JavaScripts Code.
var lPassengers = [];
$(“#Treestatic-id a.checked”).parent()
.each(function() { lPassengers.push($(this).attr(“id”)) });
$s(“P16_EMP_HID”,lPassengers.join(“:”));
Step 7
Click Save button to find checked Value.
To Auto Check the tree using hidden item value
1) Create dynamic action
Event : On page Load.
Create a true action using below code under Execute JavaScripts Code.
$(document).ready(function(){
$.each( $v(“P16_EMP_HID”).split(“:”),
function(intIndex, objValue) {
$(“li#”+objValue+”.leaf a:first-child”).click();
} ); });
