Skip to Main Content

APEX

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Interested in getting your voice heard by members of the Developer Marketing team at Oracle? Check out this post for AppDev or this post for AI focus group information.

Checkboxes in APEX Tree (not jsTree)

Christian KlingbacherFeb 9 2016 — edited Feb 10 2016

Hi,

I need to work with checkboxes in a tree. Due to I am working with APEX 5 I implemented the APEX Tree.

So I was searching for a while - and there are solutions for the jsTree - e.g. Issue with jQuery in tree with checkboxes

But for further support and development I would prefer to use the APEX Tree.

So are there any examples, best practices, or solutions for implementing checkboxes into the new APEX Tree?

Kind regards,

Christian

Comments

Pavel_p

Hi Christian,

there is not too much documentation and examples of the new APEX tree. If you finally gave it up and decided to use the jQuery tree instead, I suggest to read this excellent Tom's blogpost Tom's Blog: Implementing an ajax tree in apex

Regards,

Pavel

John Snyders-Oracle

If the purpose of the checkbox is simply for multiple selection then you could just set the multiple option to true. You don't actually need a checkbox to do multiple selection.

Simply add to a DA or Execute JavaScript when page loads

    $("#empTree").treeView("option","multiple", "true")

replace the selector with your tree id.

At anytime you can get the selected elements or nodes with:

$("#empTree").treeView("getSelection")

$("#empTree").treeView("getSelectedNodes")

How do you plan to use the checkboxs?

John Snyders-Oracle

If you want a visual checkbox indication to reinforce the selected state you can add some css rules such as the following to the page inline css:

.a-TreeView-label {

    margin-left: 16px;

}

.a-TreeView-label:before {

    content: "";

    display: block;

    font-size: 12px;

    font-family: FontAwesome;

    height: 14px;

    opacity: 0;

    position: absolute;

    transition: opacity 0.1s ease 0s;

    width: 14px;

    color: #404040;

    top: 5px;

    left: 18px;

}

.a-TreeView-content.is-selected > .a-TreeView-label:before {

    opacity: 1;

}

But this would not be an interactive checkbox that you can click on. You would still need to use the standard Shift and Ctrl modifiers with mouse click or keyboard arrows and space key to do the multiple selection. I actually think multiple selection is less cluttered without the checkboxes. If your users are not familiar with standard multi selection methods you can add some help text to the page.

If you want an actual checkbox in the node label then, it can be done, with a custom node renderer. I have not yet made a public example of how to do this. It has come up a few times so I should. Just not sure when I will have time.

There is a little background info on the treeView here

APEX 5.0 Page Designer: Meet the Widgets | HardLikeSoftware

and also here

APEX 5.0 Converting to the new APEX Tree | HardLikeSoftware

The best place to look is at the extensive comments in the source code widget.treeView.js.

Christian Klingbacher

Hi Pavel,

thanks for your reply - I am afraid that I have to consider that :-(

I wanted to use the newer solution because Oracle marks the jsTree with "legacy" - so I thought that the APEX Tree has implemented at least all functions that jsTree offers...

Regards,

Christian

Christian Klingbacher

Hi John,

thanks for your detailed explanations.

I need the tree for three purposes:

  • Navigation through a complex structure of data
  • Filtering this data and save and load the filter with ajax on user level
  • Linking to a modal window to show the detail data

Furthermore the selection should be self-explaining - so the shift/ctrl-selection is no option :-(

So I think that I will have to switch to jsTree...

Regards,

Christian

1 - 5
Locked Post
New comments cannot be posted to this locked post.

Post Details

Locked on Mar 9 2016
Added on Feb 9 2016
5 comments
1,610 views