Dynamic Tree View Sample

Rajeshpatil74 · September 5, 2018, 12:02pm

How one can implement dynamic tree view ?

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.

Thanks
Rajesh

walter · September 5, 2018, 12:09pm

That’s what Incremental Tree demonstrates.

I’ve created a variation at: Incremental Tree

Rajeshpatil74 · September 5, 2018, 12:37pm

I need to TreeLayout instead of ForcedDirectedLayout.

I did some minor changes in template, and this is what i get -

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.

walter · September 5, 2018, 1:08pm

I suggest you copy the layout from GoJS Tree View, and maybe the node and link templates too.

Rajeshpatil74 · September 6, 2018, 5:48am

Hi Walter,

Able to make the dynamic tree view as required - Needs two other things to work in following manner …

TreeLayout

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??]

Also there is extra pixels gets added when node is expanded (as shown in circle). How to fix it ?

walter · September 6, 2018, 11:47am

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.

Rajeshpatil74 · September 6, 2018, 12:06pm

Yes. This resolved the extra pixels issue.

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 ?

walter · September 6, 2018, 12:19pm

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:

        $("TreeExpanderButton",
          {
            width: 14, height: 14,
            "_treeExpandedFigure": "TriangleDown",
            "_treeCollapsedFigure": "TriangleRight",

You can choose other Figures if you prefer, or you can define your own Figures, or you can use custom Geometries. GoJS Shapes

walter · September 6, 2018, 1:00pm

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.

          selectionAdornmentTemplate: 
            $(go.Adornment, "Auto",
              $(go.Shape, { fill: "rgba(0,0,255,0.1)", strokeWidth: 0 }),
              $(go.Placeholder, { margin: new go.Margin(0, 300) })
            ),

As above, the 300 there is the width of the viewport in the sample.

Now that normally puts the Adornment in front of the selected Node. That’s why I used a translucent Shape.fill.

But if you don’t want to obscure the Node at all, you can put the “Adornment” Layer behind the layer(s) with the Nodes and Links. Something like:

    myDiagram.addLayerBefore(myDiagram.findLayer("Adornment"), myDiagram.findLayer("Background"));

Then you can use a fill such as “dodgerblue” without obscuring the icons or the text.

walter · September 6, 2018, 2:55pm

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.

Rajeshpatil74 · September 6, 2018, 6:19pm

Thanks Walter
AdornmentTemplate - makes complete row of node highlighted.

Needs following two improvements now -

The node empty area ( left side before the expand icon and right side after the text )should be clickable.
As I move the mouse, complete row in different color needs to be highlighted (same as adornment)

Any suggestion, how i achieve this ? Because selectionAdornment is working after node gets selected.

walter · September 6, 2018, 6:58pm

Set the Adornment.background to “transparent”.
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”.

Rajeshpatil74 · September 17, 2018, 11:08am

Hi Walter,

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 ??

walter · September 17, 2018, 11:21am

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

Rajeshpatil74 · September 17, 2018, 11:44am

Thanks.
Using Panel Position and depending on whether child exists or not, text position is set.