Add new empty group on button click

GoJS
1

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, Regrouping Demo)

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,

2

Your code to add a group to your diagram looks fine. If you comment out all of your templates, does it work? (Of course it won’t look like the group that you want, but at least it will be there looking like an empty group.)

3

I just remove all of groupTemplateMap

this.myDiagram.groupTemplateMap.add("OfGroups",
....
)

but it doesn’t work. There is only Text.

I don’t know why “isGroup” doesn’t work.

console.log(this.myDiagram.model.toJson())

{ “class”: “go.TreeModel”,
“nodeDataArray”: [ {“isGroup”:true, “key”:1, “text”:“Added Group”} ]}

4

TreeModel does not support Groups. You must use GraphLinksModel.

5

Oh… OK, I see.

I will compare changing my code for GraphLinksModel and replacing a Group with keeping TreeModel.

Thanks for your help