At the first moment my tree contains only the root nodes and their children. This children don't have children because they are loaded dynamically when the user clicks on the node (using loadData).

In this case, the layout doesn't show the arrows on the nodes that don't have children, but I need the arrows, for presentation issues.

To resolve this, I added an anchor with class="toggler closed", but this arrow doesn't have the open and close event.

How can I solve this case?

Hi,

I have tried to use "getNodeByCallback" function to perform a search. Here is the code snippet

SearchTreeNode.prototype.invoke = function SearchTreeNode_prototype_invoke(readyHandler) { if(this.searchText) { console.log('SearchTreeNode:' + this.searchText); var node = this.tree.tree('getNodeByCallback', function(node) { if (node.name == this.searchText) { console.log('SearchTreeNode comparing "' + this.searchText + '" with node.name[' + node.name + ']'); // Node is found; return true return true; } else { // Node not found; continue searching return false; } } ); if(node) { console.log('SearchTreeNode: node found' + node.id); this.tree.tree('scrollToNode', node); } } readyHandler(); }

you can ignore the bits which are not relevant, but please check the part from "var node... " because that is how the documentation says to use the api. I added console logs to show how the execution goes

Here is the tree that I am searching on:

Looking at the console logs I feel the API is not even getting invoked. Please let me know if the call is made incorrectly. Thanks.

If you dynamically add a contenteditable=true div after the .jqtree-title

How can I assign a different tabindex attribute value to the span tag of the root node? For all other nodes, passing a function for "onCreateLi" works but the root node always has a tabindex value of "0".

Is there a way to prevent selecting (focusing) the root node by default?

This happens when you add and remove, and then add nodes again. This issue occurs at random, and there's no particular pattern of steps on when this happens so it's really difficult to recreate. It happened like 20 times in an hour of testing.

Not really a bug... I have a lazy loader tree. It starts with three top nodes (Nodes 19,20,21). I can show the top node I have some code that checks the http request for what top node they want and automatically shows it and it's children (Nodes 81,82,83)

But I want to be able to select (via javascript) the top node (node 19) and it's direct child (node 81) and display the parts associated with (node 81) - (nodes 101,102 ,103).

I know what nodes I want, I just can't figure out to get to them beyond the top node.

• Equipment Type 1 (node 19) |-Manufacturer 1A (node 81) |-Part 1Aa (node 101) |-Part 1Ab (node 102) |-Part 1Ac (node 103) |-Manufacturer 1B (node 82) |-Manufacturer 1C (node 83)
• Equipment Type 2 (node 20)
• Equipment Type 3 (node 21)

For some reasons the autoscroll feature when I drag a node won't work on my project. As I don't have any error message, I would like to ask you what can prevent it from working. The dragged node is way out of its container but the scrollbar stays still. Thanks for your help. And for jqTree.

Hi,

Here's my issue: when I move one root_1 inside root_2 target_node.getLevel(), it returns 1. However when I move root_1 and place it before root_2, it still returns 1 whereas it should logically be 0. Here's the fiddle: http://jsfiddle.net/c7Jem/2/ (try moving TVs inside Cameras and then back above Cameras).

Basically, there should be an invisible root of 0 that all others are descendants of [OR] just 1 root. With the current setup, one can have multiple roots and there's no way of telling whether I am placing the node below the root.

Any solution/workaround?

Thanks for the great plugin; works great otherwise.

Hi guys,

when i search for a folder it does not show the child elements and i am not able to open the folders on search . i have to click them to open.

I have solved the above issue with help of #282 . Now i have a new one .

when i have autoOpen : false after search it does not open it automatically. How can this be done ?

Thank you

I couldn't find any current API that would allow me to do that.

For example, in my application it is possible to create new elements in the tree dynamically.

Currently I'm refreshing the whole tree if I need to add another root element, while this also looses all information about collapsed and expanded nodes.

It would be handy if I could just append some element to the current tree. Is that already possible?

There's a reason on why the "saveState" feature doesn't fire "tree.open" and "tree.select" events?

Every node selection, I call a $.load(...) to populate a products grid in a <div>, like this :

$('#tree1').bind('tree.select', function(event)
{
    $('#products_grid').load('URL', { node: event.node.id  }, function()
    {
        // Products loaded
    });
});

But this event wasn't fired on page load by the "saveState" feature, how can I do? Thank you very much.

Hello

Thanks for producing this Tree view code.

Can you provide some guidance for paginating the data for each node and showing each page on sliding the range.

Thank you for this wonderful modern, good Developer Experience (DX) js library for tree display and exploration.

This ticket is mainly an informational one to outline how we have been already using jqtree with Drupal 9 successfully. Some input on combining permalink display with exploration welcome.

Outline

I've built a drupal 9 project with 10s of thousands of Drupal nodes, where each Drupal node has a field referencing its parent. This enables a deep and wide hierarchical tree to be modelled in data.

Data modelling leading to using Drupal nodes referencing their parent node, with jqtree for display of deep tree

In our problem domain, the concept of Drupal's hierarchical taxonomy can present itself as the apparently obvious choice. But in the end, nodes were chosen.

This is because:

1 - in data modelling of Drupal concepts, the tree was about the nodes themselves rather than a separate set of terms describing them, for one reason not to use Drupal taxonomy entities and bundles

2 - Moreover, taxonomy terms, in terms of data modelling ought to tag more than one piece of content. In our case, each node was unique and therefore not more than one node shared a Drupal taxonomy term.

3 - Thirdly and related, I also believe that generally a Drupal taxonomy should contain a relatively small number of terms, e.g. in 10s, not several 10s of thousands. Several out-of-the box drupal taxonomy hierarchical tree solutions in the forms of modules were considered, but these did not scale well to 100s of thousands, particularly because of the sheer number and the solution attempted to render all of them at once.

So the outcome of the above evaluation of existing solutions, was to develop a custom solution. In-page interactivity (i.e. without having to load the page on each click) was needed, and I did research on js tree based libraries. jqtree emerged from that research as the best candidate, because of it's clean modern documentation and abundant real-life examples. Thank you.

I should make the distinction between the concept of Drupal taxonomy and taxonomy as a general definition. Taxonomy as a general definition applies in our case, for modelling data related to biological/biodiversity of species taxon/taxa hierarchy. It's just that we are choosing not to use Drupal's taxonomy structure entity to model them, but instead rather, Drupal nodes, for the reasons already outlined above.

In our custom Drupal 9 module, endpoints defined in routing.yml, along with Controller class methods, provide the endpoints urls with parameters that jqtree defines as needing to show this tree and to click to expand.

Also in the custom module, code has been added to respond to an event click on jqtree node for displaying of information about the Drupal node, next to the jqtree. The code also changes the url in the browser ( https://stackoverflow.com/a/3503206/227926 ) to provide a permalink.

Another endpoint implementation expands (opens) the jqtree to that node id in the permalink url. The Drupal side implementation of this endpoint uses server-side recursion function in the custom Drupal module to build the required jqtree json, to return to jqtree from an endpoint call, starting from the node id in the url of the child, successively enclosing this in js obj structures.

Extension ideas of our project: Next idea: Merging permalink expand tree functionality with expanding other parts of the tree - suggestions welcome!

The permalink based expansion of the jqtree could be expanded so that browsing other levels and expanding those of the same tree is possible. I think this would be achievable by generating sub tree json of those expansions returned by an endpoint triggered by an expand event.

Would welcome any thoughts on the above extension, particularly in terms of which jqtree events, calls, functions to use. I will be researching this too and would aim to contribute back here. Thanks again!

Hi Marco, thanks for including the fix for 'buttonleft=false' in 1.6.2.

The default CSS however yields a suboptimal placing of the button, in case the entry does not fit on a single line.

You have given me the following advice:

This is what I get with the default css:

Schermafbeelding 2021-10-20 om 14 56 37

The button is aligned to the right, but only when the title is on multiple lines. I don't know why that is.

When I remove display: flex; from the ul.jqtree-tree .jqtree-element element, I get:

Schermafbeelding 2021-10-20 om 15 01 45

This looks better. Perhaps this is a good option when the button is on the right. Could you try if this works for you?

Yes, this has worked for me .. and I prefer this placing, as well.