Is there an easy way to hide all nodes of a group node, without setting visible property of each node/ link?

[sateesh]

Hi,

As shown in below UI mock, we need a node that groups two or more nodes in it.

I am thinking to use go js Group node for this specific use case. So when user clicks on “hide” link, it should hide all nodes added to placeholder under this group. And as shown below, even the size of the group node should automatically shrink.

But I have a few queries in this context.

1. Is there a way to hide all nodes under a group node, without setting visible property to false for each node/ link ? I tried setting visible property for placeholder. But that didn’t work. I also tried to wrap placeholder within a panel and set visible property of panel to false.

2. What is the suggested way to dynamically adjust size of group node, if at all hiding nodes works ?

Thanks in advance!

[walter]

That what collapsing a group does. It effectively makes all of its member parts not visible (i.e. Part.isVisible() will become false for those members, recursively) without actually setting Part.visible to false.

https://gojs.net/latest/intro/subgraphs.html#CollapsingAndExpandingGroups

[sateesh]

I have seen this example. But in our specific use case, we need a hyper link (hide/ show) which shows or hides content added to place holder.
Also the height of icon container panel (the one in orange color) should also change dynamically based on whether group is collapsed or expanded.

Does subgroupexpander button allow customisation to render it as a link, instead of button ? And does this always collapse placeholder content only ?

[walter]

Yes, any GraphObject can have a click event handler that executes almost anything that you want. At its simplest, I think you want something like:

      myDiagram.groupTemplate =
        $(go.Group, "Auto",
          { ungroupable: true, locationSpot: go.Spot.Center },
          $(go.Shape, { fill: "white", strokeWidth: 0 }),
          $(go.Panel, "Table",
            $(go.Shape,
              { fill: "orange", strokeWidth: 0, width: 20, stretch: go.GraphObject.Vertical }),
            $(go.Panel, "Vertical",
              { column: 1 },
              $(go.TextBlock,
                { margin: 5, minSize: new go.Size(200, NaN), editable: true },
                new go.Binding("text").makeTwoWay()),
              $(go.Placeholder, { padding: 5, minSize: new go.Size(200, NaN) }),
              // Either use a convenient predefined Button:
              // $("SubGraphExpanderButton",
              //   { alignment: go.Spot.Left, margin: 5 })
              // Or implement whatever you like:
              $(go.TextBlock,
                {
                  alignment: go.Spot.Left,
                  margin: 5,
                  isUnderline: true,
                  stroke: "royalblue",
                  click: function(e, tb) {
                    var group = tb.part;
                    if (group.isSubGraphExpanded) {
                      group.diagram.commandHandler.collapseSubGraph(group);
                    } else {
                      group.diagram.commandHandler.expandSubGraph(group);
                    }
                  }
                },
                new go.Binding("text", "isSubGraphExpanded",
                  function(exp) { return exp ? "Hide" : "Show"; }).ofObject()
              )
            )
          )
        )

[sateesh]

Thank you for your inputs