APEX: Tree with Checkboxes

The APEX Tree component is based on jsTree which is a jQuery Tree Plugin. However not all functionality is implemented in APEX. Knowing the component on which it is based, we can find the documentation and enhance the Tree in APEX. One of these enhancements is to have checkboxes in the APEX Tree component. In this blogpost I will show you how to change the default folders to checkboxes. I will assume that you already have an APEX Tree on one of your pages, and that this one needs to be ammended to have checkboxes instead of folders. The first thing that you want to do to make the APEX Tree easier to locate in the javascript code is to add a static ID to the Tree Region.
Navigate to the Tree Region and entry a name as the static ID, I choose "catalog-tree".

Next is to add some javascript code to the page which will modify the tree folders.
At the highest level on your page, right click and choose "Edit". Add the following code to the section labelled "Execute when Page Loads"

regTree = apex.jQuery("#catalog-tree").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");
        }
 }
});

Line 1: This will find the Tree object that we want to manipulate. Note that the jQuery selector that is used references the static ID that we assigned in the earlier step.
Lines 2 through 5:
This will change the folder-icons to checkboxes... yes, it's that easy.
Lines 6 through 37:
When you check a checkbox at a high level, all the lower levels will also be checked. When you check a node at a lower level, the level above will either get a checkmark or a square depending whether all lower levels are checked or not.
In order to equip the checkboxes with this functionality all these lines of javascript are necessary,... yes, it's that hard. :)
Lines 38 through 43:
The last two events "onopen" and "onclose" might seem strange, and they are. It seems that the little triangles used to open and close the nodes fire the opposite event. Thanks to Christian Rokitta for discovering this oddity and providing a solution for it.


When you include the "Contract All" and "Expand All" buttons on your page, you will notice that they won't work anymore.
Change the "Expand All" button URL target to

javascript:$("#catalog-tree ul li:not(.leaf)").addClass('open').removeClass('closed');

and change the "Contract All" button URL target to

javascript:$("#catalog-tree ul li:not(.leaf)").addClass('closed').removeClass('open');

To see a working example, check out my demo
In the next blogpost I will show you how to startup the page with the pre-selected values from the database.