How to place the nodes in palette arbitrarily

GoJS
1

I have several nodes of different types in a palette. In order to classify the nodes, I need to arrange them in different rows.
For example, four nodes are placed within one row in the palette as shown in the pic.

The requirement is separating them into three rows. The first row has one node, the second row has two nodes and the third row has one node.
I have tried to change Node.location, but it didn’t work

2

I think what is happening is that the Palette.layout, which is normally an instance of GridLayout, is moving all of the nodes, thereby causing your location binding results to be discarded.

Set Palette.layout to new go.Layout().

3

Thank you, walter! I have solved the problem now.
Actually, there are two obstacles.
The first one is the GridLayout should be changed to Layout.
The second one is the place where the model defines. For example, if I write code like this, the locating binding is still unsuccessful.

myPalette =
  $(go.Palette, "myPaletteDiv",
    {
     model: new go.GraphLinksModel([
     { key: "A", color: "lightblue", loc: "0 0" },
     { key: "B", color: "orange", loc: "100 0" },
     { key: "C", color: "lightgreen", loc: "200 0" },
     { key: "D", color: "pink", loc: "300 0" }
     ]),
     layout: $(go.Layout)
    });
myPalette.nodeTemplate =
  $(go.Node, "Auto", 
  new go.Binding("location","loc",go.Point.parse).makeTwoWay(go.Point.stringify),
    $(go.Shape, "RoundedRectangle", { strokeWidth: 0},
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { margin: 8 }, 
      new go.Binding("text", "key"))
  );

If I define the model like this, the location binding is successful.

myPalette =
  $(go.Palette, "myPaletteDiv",
    {
     layout: $(go.Layout)
    });
myPalette.nodeTemplate =
  $(go.Node, "Auto", 
  new go.Binding("location","loc",go.Point.parse).makeTwoWay(go.Point.stringify),
    $(go.Shape, "RoundedRectangle", { strokeWidth: 0},
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { margin: 8 }, 
      new go.Binding("text", "key"))
  );
myPalette.model = new go.GraphLinksModel([
  { key: "A", color: "lightblue", loc: "0 0" },
  { key: "B", color: "orange", loc: "100 0" },
  { key: "C", color: "lightgreen", loc: "200 0" },
  { key: "D", color: "pink", loc: "300 0" }
]);

Why does the place of model definition matter?

4

Yes, you want to initialize your Diagram before setting Diagram.model.

I’m not sure about why it wouldn’t do what you want with the first sequence of assignments. The default node template does not have any binding on Node.location.

Do you really need the binding to be TwoWay in your Palette? I suppose it does no harm and would permit you to share the template with your main Diagram. But if they’re not going to be shared, you might as well simplify as much as you can.

5

Thank you for your answer and suggestion!
I don’t need TwoWay-Binding in my project. And the node templates are different from main diagram to palette, so then can not be shared.