Add new empty group on button click

@MJ wrote:

Hello,

I want to add new empty group on button click.

But only the textblock is added when the button is clicked.

Here is my code.
(I referenced this link, http://gojs.net/latest/samples/regrouping.html)

this.myDiagram= $(go.Diagram, this.props.graphId,{
			  initialContentAlignment: go.Spot.Center,
			  allowDrop: (this.props.isDrag && !this.props.onlyEnd && this.props.isElementEditable), // must be true to accept drops from the Palette
			  allowMove: (this.props.isSetting && !this.props.onlyEnd && this.props.isElementEditable),
			  mouseDrop: this.dropElemnets,
			  "animationManager.isEnabled": false, // slightly longer than default (600ms) animation
			  "undoManager.isEnabled": true,  // enable undo & redo
			  "allowVerticalScroll":true,
			  validCycle : go.Diagram.CycleNotDirected,
			  layout: $(go.TreeLayout,
                             { angle: 0,
				arrangement: go.TreeLayout.ArrangementFixedRoots,
				setsPortSpot: false
			})
})

this.myDiagram.groupTemplateMap.add("OfGroups",
      $(go.Group, "Auto",
        {
          background: "transparent",
          // highlight when dragging into the Group
          mouseDragEnter: function(e, grp, prev) { highlightGroup(e, grp, true); },
          mouseDragLeave: function(e, grp, next) { highlightGroup(e, grp, false); },
          computesBoundsAfterDrag: true,
          // when the selection is dropped into a Group, add the selected Parts into that Group;
          // if it fails, cancel the tool, rolling back any changes
          mouseDrop: finishDrop,
          handlesDragDropForMembers: true,  // don't need to define handlers on member Nodes and Links
          // Groups containing Groups lay out their members horizontally
          layout:
            $(go.GridLayout,
              { wrappingWidth: Infinity, alignment: go.GridLayout.Position,
                  cellSize: new go.Size(1, 1), spacing: new go.Size(4, 4) })
        },
        new go.Binding("background", "isHighlighted", function(h) { return h ? "rgba(255,0,0,0.2)" : "transparent"; }).ofObject(),
        $(go.Shape, "Rectangle",
          { fill: null, stroke: "#FFDD33", strokeWidth: 2 }),
        $(go.Panel, "Vertical",  // title above Placeholder
          $(go.Panel, "Horizontal",  // button next to TextBlock
            { stretch: go.GraphObject.Horizontal, background: "#FFDD33" },
            $("SubGraphExpanderButton",
              { alignment: go.Spot.Right, margin: 5 }),
            $(go.TextBlock,
              {
                alignment: go.Spot.Left,
                editable: true,
                margin: 5,
                font: "bold 18px sans-serif",
                opacity: 0.75,
                stroke: "#404040"
              },
              new go.Binding("text", "text").makeTwoWay())
          ),  // end Horizontal Panel
          $(go.Placeholder,
            { padding: 5, alignment: go.Spot.TopLeft })
        )  // end Vertical Panel
      ));  // end Group and call to add to template Map

Here is button click event

addGroup : function(){
		this.myDiagram.startTransaction("addGroupContents");
		this.myDiagram.model.addNodeData({ isGroup: true, category:"OfGroups", text:"Added Group", key:1});
		this.myDiagram.commitTransaction("addGroupContents");
	},

Thanks,

Posts: 2

Participants: 2

Read full topic