ronnyweiss / apex-fancy-tree-select Goto Github PK

Fancy Tree Plug-in for Oracle APEX

License: MIT License

CSS 1.89% JavaScript 51.27% PLSQL 46.83%

apex-fancy-tree-select's Introduction

Apex-Fancy-Tree-Select

This Plug-in is used to draw a FancyTree with select option. Selected nodes can be set into different APEX items. It has also the option to use it as read only tree and you can cache large trees in local storage on the client to save loading the data each time you refresh a page with the same tree. It's also possible to filter the tree with a search field.

The Plug-ins also supports different events:

Expand Parents of selected Nodes all: $("#static-tree-region-id-of-the-tree-region").trigger("expandSelected");
Expand all: $("#static-tree-region-id-of-the-tree-region").trigger("expandAll");
Collapse all: $("#static-tree-region-id-of-the-tree-region").trigger("collapseAll");
Select all: $("#static-tree-region-id-of-the-tree-region").trigger("selectAll");
Unselect all: $("#static-tree-region-id-of-the-tree-region").trigger("unselectAll");
expand Tree to a specific Level (When you left data then configJSON is used): $("#static-tree-region-id-of-the-tree-region").trigger("expandToLevel", 3);

The tree also supports apexbeforerefresh and apexafterefresh event that are available in dynamic actions.

For working Demo just click on:

https://apex.oracle.com/pls/apex/f?p=103428

If you like my stuff, donate me a coffee

Important clarification: My work in the development team of Oracle APEX is in no way related to my open source projects or the plug-ins on apex.world! All plug-ins are built in my spare time and are not supported by Oracle!

apex-fancy-tree-select's People

Contributors

Stargazers

Watchers

Forkers

matthias-range-ais elhou80

apex-fancy-tree-select's Issues

Link on active node

Hi Ronny

We've been using your fancy tree plugin since upgrading to APEX 20. It's amazing and has helped us our enormously. We have noticed one thing (unless we've configured it wrong). Once an active node is selected the link from that active node does not fire. Just thought you might like to know

Thanks

Simo

IG refresh triggers cleanData

Hi Ronny,

first of all thank you for this useful plug-in. We have set up plugin in APEX 22.1 and all works great until there is an IG on the same page.
Loading works, but when you try to refresh IG, set filter, or any "refresh" action on IG at that point Fancytree plugin get following error :

Error in action for 'search'. TypeError: Cannot read properties of null (reading 'tooltip')
at c..element..d.remove (desktop_all.min.js?v=21.2.9:34:15314)
at HTMLTableCellElement.h (desktop_all.min.js?v=21.2.9:29:12125)
at HTMLTableCellElement.dispatch (desktop_all.min.js?v=21.2.9:2:43064)
at v.handle (desktop_all.min.js?v=21.2.9:2:41048)
at Object.trigger (desktop_all.min.js?v=21.2.9:2:71515)
at S.fn.init.triggerHandler (desktop_all.min.js?v=21.2.9:2:72194)
at k.cleanData (fancytree.pkgd.min.js:1:231)
at a.cleanData (jetCommonBundle.min.js?v=21.2.9:209:50636)
at S.fn.init.empty (desktop_all.min.js?v=21.2.9:2:50317)
at k...refresh (interactiveGrid.min.js?v=21.2.9:7:24298)

So clearly something was triggered during "refresh" event. (I assure you there is no JS or any action added from our side to trigger anything on plug-in region).

With further investigation I found that this part of code is triggered :

file js/lib/jquery.fancytree-all-deps.js

$.cleanData = ( function( orig ) {
		return function( elems ) {
			var events, elem, i;
			for ( i = 0; ( elem = elems[ i ] ) != null; i++ ) {

				// Only trigger remove when necessary to save time
				events = $._data( elem, "events" );
				if ( events && events.remove ) {
					$( elem ).triggerHandler( "remove" );
				}
			}
			orig( elems );
		};
	} )( $.cleanData );

When I remove this part of code, plugin works without problem. Please check plugin, and suggest what can be workaround for this issue.

Plugin is unusable with IG on the same page at the moment.

Thank you,
Kind regards,
Andrej Grlica

API for setting checked state

Hi Ronny,

Is there an API for programmatically checking the nodes?

Thanks!

Calin

Fancy Tree missing indention when used in RTL applications

Hello Ronny:

I am using RTL on one application and when using the Tree Plugin the Indention is gone. Parents and Children showing at the same level.

Is there something that could be done to remedy this issue.

Thanks

Wassim

General Code Rework and Library update

Update to latest version of libraries
Replace var with let or const
Remove ESLINT Error

Selection Mode2

Hello,
Would it possible when i manually check hierarchie 6 , that all the child nodes would be selected

the selection mode 2 is the most appropriate because would like to deselect a child like

regards
jm

"Expand All" & "Collapse All" ??

Hi,

Can you please share how to implement Collapse All and Expand All functionality?
Thanks

Sammeer

Semi-Select

How can I determine which option has been selected in a Semi-Select manner?
I am using Fancy Tree (Selection Mode 3) and currently, I can determine which option is selected or unselected. However, if a sub-item within a tree is selected, the main tree will be in the Semi-Select state. I also need a list of Semi-Select options.
thanks

New selection mode for Fancy Tree / APEX-Fancy-Tree-Select

1st thank you for this awesome plugin, it really makes difference!

There is sometimes need to do selections like in Selection Mode 3 but allowing only parent node without childrens.
So there is need for new mode (4) to extend the 3 which checks the parents in the hierachy also.

In perfect world the selection mode 3 which selects all childrens could be there too, but then it should allow deselecting them one by one so that only parent node for that branch is selected.

Checked the fancy-tree and I think there is no such mode currently and so I have configured the plugin sql+json hack variant from select mode 2 by fiddling with icons to mimic the "checks" for the checkbox icons by hiding checkbox icon and showing checked in icon for the folder icon etc. - but that is not as clean during editing like the Selection Mode 3. After save and refresh it renders neatly.

rgrds Paavo

Expand to a specific node

Hi,

I have been using the plugin and I was wondering if you could make it possible to so you are able to expand the tree by id.

Example:

ID 1 (collapsed)
      ID 2 (not visible because ID 1 is collapsed)
ID 3 (expanded)
      ID 4 (visible)

The code could look like the following "$("#tree").trigger("expandById", 1);"
and it would make all the children of ID 1 expand.

Greetings,
Vito

Sorting nodes

Can you make it possible to sort on a different field than id?

CSS setting for Dark Theme

Could you please add a CSS setting for the Vita Dark theme?

We are using the Dark theme in our APEX application and if I use the search function in Fancy-Tree the contrast is not the best.

Option to check all nodes

It would be nice to have an option similar to TYPE 3 but when the child node from is marked, all parent nodes are marked and sent to the text field. This would allow for an easier update/select without performing the logic to check for parent nodes.

Umgang mit JQuery nicht mit anderen Plugins nicht immer kompatibel

Hallo Ronny,
Mangels Zeit kann ich das Problem leider grade nicht nachbauen - sry dafür.

Auf einer APEX Seite wird ein normaler modaler Dialog geöffnet, auf welchem das Fancy-Tree-Plugin genutzt wird und per PageLoad-Dynamic Action das APEX-Dynamic-Dialog-Title ausgeführt wird.

Dabei wird im Javascript zum Setzen des Dialog Titels aber ein Fehler verursacht:
apex.util.getTopApex().jQuery(".ui-dialog-content").dialog("option","title", "Bla!");

Error Stack:

Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'option'
at Function.error (jquery-3.6.0.js?v=21.2.1:338:9)
at HTMLDivElement. (fancytree.pkgd.min.js:1:2074)
at Function.each (jquery-3.6.0.js?v=21.2.1:385:19)
at jQuery.fn.init.each (jquery-3.6.0.js?v=21.2.1:207:17)
at k.fn. [as dialog] (fancytree.pkgd.min.js:1:1818)
at HTMLDivElement. (f?p=30000:3270:6227315020229::YES:RP,3270:P3270_IDENT:4077&cs=3R-B_cItnZvNLv-RuqdPBurUwMyCLUHmxcz_IZSaMIjcahBz1dW1-UOt27bblO9QBYT2FRdc3myG8KbWgoGMRyg&p_dialog_cs=lWzITfnp94ovbpBq8EpLwlOUnJMGRB8Xrl_3FbvUgYwxpyzWk6PpnibzJgsctHRVN1zc271t_qkHiPtHx9MCwg:370:27)
at Function.each (jquery-3.6.0.js?v=21.2.1:385:19)
at jQuery.fn.init.each (jquery-3.6.0.js?v=21.2.1:207:17)
at Object.javascriptFunction (f?p=30000:3270:6227315020229::YES:RP,3270:P3270_IDENT:4077&cs=3R-B_cItnZvNLv-RuqdPBurUwMyCLUHmxcz_IZSaMIjcahBz1dW1-UOt27bblO9QBYT2FRdc3myG8KbWgoGMRyg&p_dialog_cs=lWzITfnp94ovbpBq8EpLwlOUnJMGRB8Xrl_3FbvUgYwxpyzWk6PpnibzJgsctHRVN1zc271t_qkHiPtHx9MCwg:367:260)
at da.doAction (dynamic_actions_core.js?v=21.2.1:597:47)

Beim Auflösen der dialog-Methode von apex.util.getTopApex().jQuery landet man plötzlich in der Datei fancytree.pkgd.min.js, was dann in Folge wohl zum eigentlichen Fehler führt.
Die Verwendung von jedem der Plugins für sich alleine funktioniert hingegen.
Mir scheint als würde der Fancy Tree das jQuery im APEX überschreiben.

enabled Debounce feature causing empty target items on page load

There is a major bug caused by the debounce feature:

If a fast clicking user opens a page with the fancy tree and immediately submits the page without changing something BEFORE the debounce timer elapsed and writes the value to the designated page item, then value is empty / NULL.
In this case, the user may accidentally delete the content.

A possible solution would be to write the value of the item directly when initializing the plugin, without executing further dynamic actions. If the debounce feature is activated, the item will be triggered again after the time has elapsed.