Getting TextBlocks of Panel in GoJS

GoJS
1

I need some help with GoJS. I’m working with the sample on this page in SubGraphExpanderButtons section. For example, I want to set color of all TextBlock in a group to red by clicking the SubGraphExpanderButton. I add click event handler

...
$("SubGraphExpanderButton", {
    margin: new go.Margin(0, 3, 5, 0),
    click: function(e, button) {
       ...
    }
}),
...

According to structure of the sample I try to get all the TextBlock something like

button.panel.panel.elt(1)

because the button is in the Horizontal Panel, the Horizontal Panel is in the Vertical Panel and in the Vertical Panel there is the Placeholder which contains all the TextBlocks. But it’s wrong. I’m not even sure that this selector get me exactly the Placeholder, and even it this is so, I cann’t get nested elements from object I get. Looks like I’ve misunderstood the very concept of GoJS.

So, my question is, how can I get all The TextBlocks group?

2

I do not understand what you are trying to accomplish. Are you actually working with Groups in your app? Did you really want to change the behavior of “SubGraphExpanderButton”? Why would you want to change the color of text in the group’s member nodes to be red, when the user cannot see them when the group is collapsed? Just have the text be red all the time.

The purpose of “SubGraphExpanderButton” is to provide a pre-packaged way for end users to toggle the state of Group.isSubGraphExpanded. I do not think it should be directly responsible for any other side-effects.

The member Nodes and Links of a Group are not in the visual tree of the containing Group. Every Part (including Nodes and Links and Groups) is a top-level object with GraphObject.panel being null. So you cannot navigate through the visual tree that is a hierarchy of Panels and GraphObjects to get to any member Node. Nor vice-versa, from a member Node through .panel to get to the containing Group.

Instead, from a Group you can use Group.memberParts to get to its member Nodes and Links, if it has any. And from a Node or a Link you can look at Part.containingGroup to get to its containing Group, if there is any.

Now I still do not understand why you would want to change the text in member nodes to red when a group is expanded, when the user cannot see any member nodes (red text or not) when the group is collapsed. But if you really wanted to do that, you could define this Group.subGraphExpandedChanged event handler:

{
  subGraphExpandedChanged: function(g) {
    if (!g.isSubGraphExpanded) return;  // do nothing if collapsed
    g.memberParts.each(function(p) {
        if (p instanceof go.Node) {
          var tb = p.findObject("MYTEXTBLOCK");
          if (tb !== null) tb.stroke = "red";
        }
    });
  }
}

Of course this assumes that your node template has a TextBlock.name set to “MYTEXTBLOCK”.

3

Thank you so much for explanation. Actually I don’t want change color of the TextBlocks, I want to change styling of TextBlock’s bound Links, but it’s not hard to get all the Links by selected TextBlocks. So, I just reduced level of unnecessary information… poorly. Now I have idea how to do it, thank you again.