Add groups to JSON feed

GoJS
1

Hi guys,
first of all, thank you for a great library, I think it really fulfills all of my needs for my next project … hopefully;)

I’ve set up the Flowchart example, and would like to add groups to the JSON feed, so that I can expand/collapse groups and save those settings in a database.

  1. I’ve added the TreeExpanderButton to the NodeTemplateMap.
  2. Then I’ve added the
myDiagram.groupTemplate = $(go.Group, go.Panel.Auto, {
      minSize: new go.Size(50, 100)
    }, new go.Binding("location", "location", go.Point.parse).makeTwoWay(go.Point.stringify), $(go.Shape, {
    fill: null,
      stroke: "blue",
      strokeWidth: 2
    }),
    $(go.Panel, go.Panel.Table, {
        name: "TABLE",
        margin: 0
      },
      new go.Binding("visible", "isSubGraphExpanded").ofObject(),
      $(go.Placeholder, {
        row: 1,
        background: "transparent",
        padding: 5
      })),
    $("SubGraphExpanderButton", {
      alignment: new go.Spot(0, 0)
    }));
  1. And then the two way databinding
    new go.Binding("isSubGraphExpanded", "expanded").makeTwoWay(),

but when I “Save” the JSON feed and “Load” it again, the nodes are not collapsed

Thanks
Kasper

2

The default value for Group.isSubGraphExpanded is true, so unless you set that property to false in the template, or unless you set the expanded property to false on the data, it will be expanded.

By the way, It’s hard to tell with the non-indentation, but I think your Table Panel is unnecessary, unless there is additional stuff that you elided when posting the template here.

3

Hi Walter,
I think you are right, the table panel is unnecessary:)

So does this mean, that I manually have to add a property to the json output, where I define if the group is expanded or collapsed? … or is there a way to automate this process?

Thanks
Kasper

4

I suggested two solutions, one of which is to add set expanded: false on the data object.

The other is to set isSubGraphExpanded: false on the Group, so that it is collapsed until the data binding sets it back to true.

5

ahhhh okay, so for both solutions, I need to update the JSON object when the user clicks the expand/collapse button, with a boolean?

6

The two-way data binding (adding makeTwoWay() to your data binding) will update the Model for you.

7

Simon, this is awesome, is it something like this, and where do I put it?

new go.Binding("isSubGraphExpanded", "expanded").makeTwoWay(),

8

Alongside your other data bindings in the Group template:

myDiagram.groupTemplate = $(go.Group, go.Panel.Auto, {
    minSize: new go.Size(50, 100)
  },
  new go.Binding("location", "location", go.Point.parse).makeTwoWay(go.Point.stringify),
  new go.Binding("isSubGraphExpanded", "expanded").makeTwoWay(),
  $(go.Shape, {
    fill: null,
    stroke: "blue",
    strokeWidth: 2
  }),
  $(go.Panel, go.Panel.Table, {
      name: "TABLE",
      margin: 0
    },
    new go.Binding("visible", "isSubGraphExpanded").ofObject(),
    $(go.Placeholder, {
      row: 1,
      background: "transparent",
      padding: 5
    })),
  $("SubGraphExpanderButton", {
    alignment: new go.Spot(0, 0)
  }));
9

Simon, do I need to add an “isGroup” property on each item in my nodeDataArray cause after I copied your code, nothing happens, and I get no errors.

10

On the nodes that you expect to be groups, yes.

Also, if you want the default value of isSubGraphExpanded to be false (if its not specified in the node data, then it uses the default value), add:

myDiagram.groupTemplate = $(go.Group, go.Panel.Auto, {
    minSize: new go.Size(50, 100),
    isSubGraphExpanded: false // new
  },
  // the rest is the same
11

My only problem is, that I’m creating the diagrams from scratch (and then saves them i a database), which means, that I’m not defining any groups. I can’t se that I’m able to create groups the same way that I just drag & drop the nodes on the stage. Does this mean, that I can’t update the json with the expand/collapse state?

12

You can add a group to your Palette the same way you added nodes.

You can also creat groups from scratch with the built in keyboard shortcut, see: Basic GoJS Sample

Specifically:

myDiagram =
  $(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element
    {
      ...
      // allow Ctrl-G to call groupSelection()
      "commandHandler.archetypeGroupData": { text: "Group", isGroup: true, color: "blue" },
      ...
    });
13

Simon, thanks a million, I think it works now, I’ll have to buy you a beer some day!