AngularJS ui.sortable with connected lists - javascript

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?

Related

insert widget in dojo/dnd source

I am using dojo/dnd to drag and drop and rearrange an array of widgets
Current I am inserting nodes to drag and drop source using following code
dragDropSourceNode.insertNodes(false, [widget.domNode]);
Instead of inserting the domNode can I insert the widget itself.
My widgets have widget_number attribute(property) assigned to it and I have an array of widgets.
Every Time there is a drag and drop, I need to change the widget_number. Also i need to rearrange the array.
But since I am sending the domNode inside, there is no way I can change the widget itself or call any function of the widget.
Is there a way to link both of them?
From domNode get widget_id and do registry.byId to get the widget and everytime there is a drag drop event, recreate the array based on the updated nodes in drag drop object.

How to disable/remove click event on asp.net tree view parent nodes?

I have a tree view in my aspx page with one level of child nodes. I want to disable the click on just the parent node of the tree view and its child nodes still be clickable. How can I disable click event just on the parent node. Is there a way to do this in c# or in java script?
check out the below link
remove Hyperlink from ASP.NET TreeView Nodes Control Nodes
hope this helps you.

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).

Dynatree: how to make node containing lazy children expandable?

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.

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