Dynatree: how to make node containing lazy children expandable? - javascript

I have created a tree navigation menu using Dynatree (http://wwwendt.de/tech/dynatree/index.html). The tree has four levels: company, group, user and computer. Every object in the tree is selectable (seleting the object opens a page showing the properties of that object), and each object can have children except for the level 4 objects ("computer").
Now I have tried to make the tree lazy-loaded according to the instructions in the documentation: http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html#lazyLoading
The first-level content loaded from the background has the isLazy option set to true and I have added the onLazyRead callback to the tree.
What I need from the tree: the first level is always loaded but expanding the first level object with the [+] character expands the first level object and loads the underlying objects (group, user, computer) in the background. Loading the tree works in the sense that I can see the first level elements, but the problem is that
the [+] sign is not displayed when the node doesn't have any children
if the node has children, the onLazyRead event is not executed
This seems like a catch-22, as there seems to be no option to make a node expandable without it having children, making it impossible to make the tree lazy-loading. What am I missing?

If your server delivers nodes that are to be lazy loaded, you must set the node.isLazy attribute to true.

Related

What is the best way to render a Vuetify v-treeview with a very large number of nodes?

I am using Vuetify framework to display a foldable Treeview component:
<v-treeview
:items="items"
:open-on-click="false"
:open-all="false"
:multiple-active="false"
hoverable
:active-class="'text_bold'"
return-object
activatable
>
And it works pretty much how I expected it to, but the problem is that the items's children can contain up to several hundreds of nodes - and even if I load them more or less effortlessly, they get rendered by the browser too slow each time a parent node is opened.
Currently the UI simply freezes for some time when a user clicks a node with too many children. What I want is to display a loader or spinner while rendering the nodes takes place - but since there's no callback event in Vuetify Treeview for finishing rendering (what I have found was only for opening and async calls), I can't set a callback event for that.
The best way todo is to load the children dynamically with load-children
A function used when dynamically loading children. If this prop is
set, then the supplied function will be run if expanding an item that
has a item-children property that is an empty array. Supports
returning a Promise.
vuetify has an example of this on their page: https://vuetifyjs.com/en/components/treeview/#async-items

How to programatically get an element that is selected/highlighted?

I am working on an application based on ASP.NET, running in IE11.
One part of the application makes use of (Telerik) RadEditor to create a layout of several items. I am selecting the items (dom elements) as seen in the below image. I selected the top item, then the bottom.
Is there a way (in JavaScript) to retrieve the elements (or even a single element)? I need to select the element(s) based on something other than the RadEditor object.
To be clear, I can't use editor.getSelectedElement(); (it doesn't do what I want). document.activeElement;, $(":focus");, document.hasFocus();, and editor.getSelection() all don't return the right objects. There also is no css class or property being applied, so they aren't any help here.

AngularJS ui.sortable with connected lists

I made editor using JQuery for data structure showed here, features:
click on [X] triggers deleting parent node and all child nodes linked to this node
click on [V] triggers showing drop-down container with child nodes and copy of parent node
click on [x] triggers deleting child node
user can perform drag-sorting for parent nodes (outlined with ++++)
user can perform drag-sorting inside parent's drop-down container including copy of parent node
etc.
I'd like to translate it to AngularJS for education purposes. I implemented parent nodes sorting, but I have a trouble implementing sorting for children nodes. Is there best approach for doing things like that w/o changing data structure?

How to append a node with children to an existing treeview with javascript

I am using Kendo UI 2012.2.607.
I am trying to append a node that I retrieved from an ajax call to add to my kendo tree view. However, despite the node matching the same model schema, only the top node is appended to the tree.
Example Node:
id: "333-333-333"
text: "Node1"
expanded: true
hasChildren: true
children: <Node2>
Node2 is of identical format. However, when I attempt to call TreeView.append("Node1") only the top level node (Node1) is appended, but not Node2, despite the tree showing Node1 should have children. Please note that the tree has loadOnDemand=true.
Is append not supposed to add the associated children?
It might help if I explain what I am trying to do. I have a potentially large tree and therefore use onDemand loading but also server side aids to limit the number of nodes per request. I provide a special node that when clicked, makes an ajax request to get more nodes and uses insertBefore to add some more.
I now have a search method as well, which i use to get the exact path to a specific node. What I want to use is this path in order to expand and add nodes dynamically (since the current node might not be loaded into the tree).

How to trigger rendering of JQuery treeview

I use jquery tree plugin to render hierarchical data.
I have coded additional functions which would allow user to interact with this data (like adding/deleting nodes, swapping nodes, etc...)
Currently this plugin supports that whenever you want to add any node, you can call following method,
$("#browser").treeview({
add: branches
});
here branches is jQuery object created with the HTML block, which would represent a particular node.
However, for delete and swapping of nodes, I use common JQuery functions like,
for delete,
$("#topnd2").remove();
for swapping,
var next = $("#topnd2").next();
$("#topnd2").insertAfter(next);
topnd2 is an id of any particular tree node.
The nodes get deleted / swapped properly but the problem is the tree does not get rendered and therefore the tree images (mainly vertical lines denoting branches) are not set properly.
For example, if I delete the last node then that node will be removed from rendered treeview but the remaining sibling node should get L as branch line image but not | .
I tried calling
$("#browser").treeview();
Please let me know your ideas.
Thanks,
Jatan
I found some workaround as given below,
Once the node is swapped up, virtually add its previous node to its child,
$("#browser").treeview({add:$("#topnd2").insertBefore(previous).next()});
If node is swapped down, virtuall add the current node to its next node.
$("#browser").treeview({add:$("#topnd2").insertAfter(next)});
currently it's working fine, will update this post, if I find any problems in this approach. Also please validate this approach if you know.
Regards,
Jatan
If you try to refresh the treeview again after node removal, the link will work but not the [+] or [-] icon. Tried this on several browsers..

Categories