Can an ASP.NET TreeView, when you click the + sign be made to expand upwards instead of downwards? So that "Children" nodes appear above their "Parents."
Essentially I want to logically be taking what would normally be a singular leaf node, making it the root of my tree, and making what is logically it's Parent into a Child Node on my Tree, but have that Child Node still display above the Parent when the Parent gets expanded.
Think a company OrgChart, but starting with the employee (leaf node) and going up.
I can't seem to find anything specifying direction on MSDN. I would like to avoid having to re-write how the Javascript of the TreeView works, but would be open to it if no other way is possible.
No, you cannot do that with the TreeView component.
Attempting to do that would involve inheriting from the TreeView and writing your custom Render function.
There is a simpler approach to it though. You could write out all your data to a json object, and use one of the numerous javascript data visualization libraries to present it.
I really like the javascript InfoVis toolkit. You can make very detailed graphs using it.
Related
I currently have this graph implemented and I'm hoping to keep the structure and collapsibility while depicting a child node having multiple parents. Is there a way to do this? I looked into force graphs but I'm also wanting to preserve a set hierarchy (meaning a parent at level 1 can have a child and level 3 shown). After a lot of research and tinkering with my current code, I am unable to figure my issues out. Is there anyone who has any experience with displaying a D3 tree node with multiple parents?
Just in case anyone was wondering what I did to answer my question. I ended up making a force diagram behave in the same manner as a tree. This provided me the possibility of having multiple parents and I just had to do some fiddling with how the diagram used forces in order to preserve hierarchy.
I want to be able to display dynamic syntax trees on a webpage, possibly with a jQuery component. To show you what I mean, this
is a syntax tree, and this is the general way I want it to be displayed.
How do I build something like this with HTML and CSS?
edit: Solution
Just in case somebody who finds this question later is trying the same, here's what I did:
I ended up drawing the tree with Graphviz as an SVG, and then, moving the svg tree inside the DOM using some magic. That way I could still interact with the elements, e.g. drag&drop or hover/click events.
The result can be seen here.
Try d3, it has a really good tree visualization
Another option is ArborJs, you can find an introduction here
I'm trying to build a force-directed layout, wherein the connected nodes have their own internal layout that is not simply a recursive force-directed layout (which, I believe, would be possible with the hierarchy layout). The "inner" layout would be custom, but, for illustration let's say I wanted the nodes, internally, to have a partition layout. Is this possible?
My question was really twofold:
can you pull off having more than one style of layout (for instance, a bubble graph inside a force-directed graph) in a sensible way with D3, or is D3 the wrong tool for such a thing, and
Can you use D3 layouts for each of these layouts, or do you have to do everything custom.
In the end, the design changed, and no longer called for this odd scenario. Being much more familiar with D3, though, I think I can answer.
Yes. It can be done. Each layout is its own discrete object, with its own data on which to work, and can be given its own DOM elements to populate. Creating two layouts that even shared the same data and DOM outputs would probably work, if you could manage the interaction between the two (making sure one only overrode changes from the other when desired).
What I know you can do for sure is manually manipulate anything that D3 is doing. At one point during development, actually, I did have two layouts on the same page, come to think of it. I was laying out half the graph with pre-determined x/y coordinates, and allowing the rest to be laid out by the force directed layout. That first set, the manually placed nodes, could have been placed by some other logic than pre-determined coordinates, and the functionality would have been roughly the same.
First of all, I am novice in ExtJS
I am working on Ext 4 Tree since few days.
The requirement is such that I want to display 3-4 representation of same tree at the same time. I want to do this using single data store.
Tree 1 will show all nodes without checkboxes
Tree 2 will show all nodes with checkboxes
Tree 3 will show only parent nodes (folders) and no leaf nodes (files)
I tried to do these using same data store but expanding/collapsing of one tree results into inconsistently expanding/collapsing of other. Also for checkbox, I have to denibe "checkbox: true/false" in data store which I have no idea how to control in Ext.
Please help me. It will be much help if there already an example around.
The main issue here is - you have just one copy of the store and all your trees are subscribed to this store events, so when something is fired by the store all trees react to that. And btw, same applies if you want for example to show couple different grids using same store.
If you need to have different behavior for each control you need to either constantly subscribe/unsubscribe from store events in each tree (depend on which one is focused right now) or more simple solution - to clone store and have individual copy for each tree.
I'm looking for a Javascript UI component which will let me drag a line between items in a hierarchical tree on one side of the screen to items in a hierarchical tree on the other side of the screen (similar to BizTalk's "Map" UI).
I've searched for "Javascript Tree Map", etc. and have only found "Treemap"s... which are not at all what I'm looking for.
I'm perfectly fine with requiring HTML5 and using canvas.
I just don't want to write this myself if there is already something out there.
Thanks!
I'm not sure if I can articulate what I'm looking for well, so let me provide an illustration:
BizTalk Map UI http://geekswithblogs.net/images/geekswithblogs_net/Chilberto/WindowsLiveWriter/BizTalkMapComparisonbetweenTableLoopinga_B5B9/image_6.png
The WireIt library will enable you to drag lines that connect components. You may still need to pull in something else to get the hierarchical view on either side though.