How to customize Collapse and Expand feature

GoJS
#1

I have defined my own links which does not maintain source and destination, hence I don’t show the arrow headers. Irrespective of how the links are being defined, I want to collapse the nodes and links based on my business requirements.

First Requirement: In the diagram, If I click on collapse button of “Cash Office” node, It should collapse “MXPSRV00033” node. In the same case, if we don’t have link between “Yammer” and “Imports Management” nodes, It should collapse “MXPSRV00033” and “Imports Management”. Please help.

#2

Because you aren’t using directed links I think you will need to implement collapse and expand yourself. You’ll need to decide the what value for the GraphObject.visible property to set for each connected Node and Link.

Even if you were using directed links you could not use the built-in tree collapse/expand functionality (i.e. the Node.collapseTree and Node.expandTree methods) because your graph is not tree-structured and the built-in behavior for non-tree-structured graphs is different from what you want.

That means that you should use a regular “Button” (not a “TreeExpanderButton”) and specify a click event handler and control the button’s visibility and appearance yourself.

#3

Actually I’m doing the same as used said. I’m implementing a custom button.

As isTreeExpanded is calling built-in functions. I want to create a new variable similar to isTreeExpanded in the nodes, so I can use it for custom validations. How can I create it?

I want to maintain dynamic expand/collapse state in each nodes and need to evaluate visibility of nodes and links based on its input links from same parents or different parents.

#4

The easiest thing would be to add a property to your node data, perhaps named “isExpanded”. You can add as many properties as you want to your node data (or your link data, if you’re using a GraphLinksModel). Doing so also means that that state would be automatically saved and restored as part of the model, and that, if you call Model.setDataProperty, you could use data binding on that property and automatically support undo/redo.

You might also want to store the visibility of each Node and Link on the model data too, depending on how you want to handle it.