My model is constructed from server data. When first time its fetched, only top level nodes are fetched with one of the property (bool) indicating whether childrens are available or not ?
With this property, i need to show expander (+) button. When the button is clicked, ajax call should be made to fetch all children for that node and model should be updated ( to display second level data).
How it can be implemented with gojs. Can you provide a template/sample for same.
Can you provide me sample working with TreeLayout.
The line is not required to be displayed.
In incremental tree, plus button is always displayed. Expanding same removes it only if there are no child. I guess this can also be possible based on flag/property.
Able to make the dynamic tree view as required - Needs two other things to work in following manner …
The expand & collapse button needs to change to something like the “Arrow” image shown in fig. below.
As you see the highlighted node in blue color uses the space of text only. I need to show the complete row highlighted including the expand/collapse button when selected (as shown in the node with black border]
[Update : As shown in below image, the highlighting gets expanded on right side including the plus button. I expect it should start from begining (like the one when first node selected) . There is extra margin gets added for each level on left side. How one can do so it starts with begining like we see in windows exploer??]
First, I assume you set a width on the Node. Something like:
$(go.Node,
{ // no Adornment: instead change panel background color by binding to Node.isSelected
selectionAdorned: false,
width: 300
},
new go.Binding("background", "isSelected", function(s) { return (s ? "lightblue" : "white"); }).ofObject(),
Note that the Binding of Panel.background is moved from the Horizontal Panel to the Node, so that the light blue selection rectangle includes the expander button.
You must have moved that button so that it is centered vertically too.
I am guessing that little bit of extra light blue that you have “circled” is just part of the regular selected node, and that it is the next node that has a “white” background and it is overlapping slightly with the selected node. That’s just a matter of adjusting the properties on the TreeLayout slightly. I’m not sure why the sample uses those values, but I suggest you try something like:
nodeIndent: 0,
nodeIndentPastParent: 1.0,
Offhand I cannot think of an easy solution of having the selection rectangle extend all the way out to the left beyond where the node is. Perhaps someone else will have an idea, or perhaps I’ll think of one in a while.
It would be nice, if you can provide the solution for complete highlight on left side.
Also there is one point i mentioned above changing the expand/collapse image to a different icon (arrow).
How that can be achieved ?
First, I should point out that the definition of “TreeExpanderButton” is given at https://gojs.net/latest/extensions/Buttons.js. I suggest that you understand how it is implemented, at least as far as what you care about.
Second, there are many example uses of “TreeExpanderButton”, so you can search for them and see how they have been customized.
I’m not sure what kind of “arrows” you want to use, but here is one possibility:
Here’s one possibility: use an Adornment after all. So get rid of the selectionAdorned setting to false, get rid of setting the width of the Node or its Panel, and get rid of the Binding of the Panel.background to the Part.isSelected property.
BTW, although not satisfying your question about extending the highlighted area all the way to the left, the sample TreeView Filling Viewport might be interesting to you.
Create a single Adornment that is initially not visible, add it to the diagram via Diagram.add, and remember a reference to it. Implement Node.mouseOver and Diagram.mouseOver event handlers to either show that single Adornment at the appropriate location, or to hide if if the mouse is not within a “row”.
As suggested in above reply, when node is selected, to show the expand/collapse button also highlighted(from start to end), the Horizontal panel is includes the TreeExpanderButton.
Due to this, the items which do not have child items gets bit shifted towards left. As shown in fig, all first level item text doesn’t start from same x position. How to fix this ??
“Horizontal” Panels necessarily put its visible elements in a row, each positioned by the accumulated widths of the previous elements.
So you could use a “Position” Panel and set the positions where you want them.
Or don’t make the button not-visible but change its opacity to zero. That way it keeps its existing width and you can continue using a “Horizontal” Panel.
Or a third way would be to make the button completely transparent by changing its strokes and fills to be either null or “transparent”. But this would be more work, although you can continue using a “Horizontal” Panel.