I have a flowchart (tree) where some nodes are expandable. I two problems that are easier to explain using pictures. I have the following diagram:




You can see that I have the nodes 3 and 3.1.1 are expandable. The numbers are nodes that are grouped with their nearest node. When I collaplse 3.1.1, I get the picture below. The issue here is that the number 3.1.1 disappears, even though the node is still visible. I dont understand why the number disappears, but the node is still there, even when I have grouped them together.




The major issue is what happens when I collapse 3, and then expand it again. The picture below represents what happens. You can see that I can't even see 3.1.1, even though it still exists in the diagram.



What am I doing wrong? Here is the code I use to create the green nodes, and create the label for the numbers:

function addPlanToNode(parentNode) {
var node = diagram.getFactory().createShapeNode(50, 50, nodeMinWidth, nodeMinHeight);
node.setTag(planTag);
node.setBrush(script.createSolidBrush(170, 230, 170));
node.setId(diagram.getTag());
node.setExpandable(true);
diagram.getFactory().createDiagramLink(parentNode, node);
return node;
}


       function addBoxNumberLabel(node) {
           var label = diagram.getFactory().createShapeNode(
                       node.getBounds().getX(),
                       node.getBounds().getY() - 4,
                       node.getBounds().getWidth(),
                       4);

           label.setTransparent(true);
           label.setIgnoreLayout(true);
           label.setLocked(true);
           label.setTag('number');

           var format = script.createTextFormat(0,0,false,false);
           label.setTextFormat(format);

           var group = node.getSubordinateGroup();
           if (group == null) {
               group = diagram.getFactory().createGroup(node);
               group.setAutoDeleteItems(true);
               group.setExpandable(true);
           }
           group.attachToCorner(label, 0);
           return label;
       }

Thanks Stoyo,

I am trying to get my own expanding/collapsing code to work using the techniques in this thread -
http://mindfusion.eu/Forum/YaBB.pl?board=wpfdg_disc;action=display;num=126769720...

I'm stuck on the first part, where my custom expand/collapse function is not running. Could you have a look. This is the code I am using:

<ndiag:DiagramView
                                   ID="DiagramView1"
                                   runat="server"
                                   ClientSideMode="JavaApplet"
                                   Height="450px"
                                   Width="100%"
                                   JarLocation="JDiagram.jar"
                                   AllowInplaceEdit="true"
                                   Behavior="DoNothing"
                                   AppletStartedScript="onAppletStarted"
                                   NodeClickedScript="onNodeClicked"
                                   NodeCreatedScript="onNodeCreated"
                                   NodeDeletingScript="onNodeDeleting"
                                   LinkDeletingScript="onLinkDeleting"
                                   EnterInplaceEditScript="onEnterInplaceEditScript"
                                   NodeTextEditingScript="onTextEditing"
                                   NodeTextEditedScript="onTextEdited"
                                   InplaceEditCancelOnEsc="false"
                                   ExpandButtonClickedScript="onExpandButtonClickedScript"
                                   DelKeyAction="DeleteSelectedItems">
                                   <Diagram
                                       AlignToGrid="False"
                                       AutoResize="AllDirections"
                                       BackBrush="s:#FFE3E3E3"
                                       ExpandButtonAction="RaiseEvents"
                                       LinkBrush="s:#FFABABAB"
                                       LinkHeadShape="Triangle"
                                       LinkHeadShapeSize="3"
                                       LinkSegments="2"
                                       LinkStyle="Cascading" />
                           </ndiag:DiagramView>

       function onExpandButtonClickedScript(sender, args) {
           alert('here');
       }

Just thought I would share the code that I've created. Hopefully it will help anyone else stuck on this.

The code 'remembers' which nodes have collapsed, and leaves them collapsed, even when the parent is expanded.

       function onExpandButtonClickedScript(sender, args) {
           var node = args.getNode();
           expandCollapseNode(node.getExpanded(), node);
       }

       function expandCollapseNode(expand, parentNode)
       {
           var parentLinkCount = 0;

           while (parentLinkCount < parentNode.getOutgoingLinks().size()) {
               var link = parentNode.getOutgoingLinks().get(parentLinkCount);
               var node = link.getDestination();
               var group = node.getSubordinateGroup();
               group.setVisible(expand);

               var nodeExpandedFlag = node.getExpanded()
               if (expand && nodeExpandedFlag)
               {
                   link.setVisible(true);
                   expandCollapseNode(true,node);
               } else if (expand && !nodeExpandedFlag) {
                   link.setVisible(true);
                   expandCollapseNode(false,node);
               } else {
                   link.setVisible(false);
                   expandCollapseNode(false,node);
               }
               //link.setVisible(expand);
               parentLinkCount += 1;
           }
       }