Which layout should I use in a group?

GoJS
21

It was my bad. I have formatted the code now. Kindly check again

22

Based on your images, I’m not sure why you’re not just using nodes as your “ports” and groups to contain them. Is there a reason you’re using nodes with item arrays instead of just nodes? It might be easier to organize things that way.

23

I can use nodes instead of ports no issue. But will it solve the arrangement problem which I am facing?

24

You’ll have to try it out. I would suggest using groups for the gray rounded rectangles and nodes for the black squares. It’s one less complication to worry about, and it’s always best to keep things as simple as possible for your application.

25

Didn’t work. same result.

linkdataArray is empty

image

after linkdataArray has one link data.

image

“linkDataArray”: [
{“from”:“innerslot4”, “to”:“innerslot5”}
]});

26

{
“key”: “innerslot4”,
“name”: “InnerSlot4”,
“size”: “20 20”,
“shapetype”:“Rectangle”,
“lyt2”:{ arrangement:270 },
//“isGroup”: true,
“group”: “card5”,

},
{
“key”: “innerslot5”,
“name”: “InnerSlot”,
“shapetype”:“Rectangle”,
“lyt2”:{ arrangement:270 },
“size”: “20 20”,
//“isGroup”: true,
“group”: “card5”,

}

27

Here you go, you can start with this: https://codepen.io/jhardy/pen/xmqYjm

28

Thanks a lot Hardy. That’s what I wanted. You are awesome…:)

29

One more and probably the last thing I want is dynamic wrapping of columns.
I want to provide wrapping column value from nodeArray.
I am doing like this but its saying wrappingColumn value should be instance of Number

new go.Binding(“layout”, “lay”, function (lay) {
if (lay.horizontal) {
return $(go.GridLayout,
{
alignment: go.GridLayout.Position,
cellSize: new go.Size(1, 1), spacing: new go.Size(0, 0),
wrappingWidth: Infinity,
wrappingColumn: lay.wrappingCol,
});
} else {
return $(go.GridLayout,
{
alignment: go.GridLayout.Position,
cellSize: new go.Size(1, 1), spacing: new go.Size(0, 5),
wrappingColumn: 1,

          });
      }
    }),

nodeDataArray: [
{wrappingCol:3 key: “main”, isGroup: true, lay: { horizontal: false } },
{wrappingCol:3 key: “topnode”, isGroup: true, size: “530 100”, lay: { horizontal: true }, group: “main” },
{wrappingCol:3, key: “shelf”, isGroup: true, size: “530 250”, lay: { horizontal: true }, group: “main” },
{wrappingCol:3, key: “slot5”, isGroup: true, size: “220 230”, lay: { horizontal: true }, group: “shelf” },
{wrappingCol:1, key: “slot1”, isGroup: true, size: “140 230”, lay: { horizontal: false }, group: “shelf” },
{wrappingCol:1, key: “card1”, isGroup: true, size: “140 230”, lay: { horizontal: false }, group: “shelf” },
{wrappingCol:3, key: “slot2”, isGroup: true, size: “115 100”, lay: { horizontal: false }, group: “slot1” },
{wrappingCol:3, key: “card2”, isGroup: true, lay: { horizontal: false }, group: “card1” },
{wrappingCol:3, key: “slot3”, isGroup: true, lay: { horizontal: true }, group: “card2” },
{wrappingCol:3, key: “slot4”, isGroup: true, lay: { horizontal: true }, group: “card2” },

How I can pass number from nodeArray to gridLayout warppaingColumn propperty?

30

The Layout classes do not support data Binding. However you could add a Binding of the Group.layout property from the "wrappingCol" data property that uses a conversion function that takes the "wrappingCol" value and returns the desired instance of GridLayout.

new go.Binding("layout", "wrappingCol", function(col) {
    return  $(go.GridLayout,
        { . . .,
            wrappingColumn: col,
        });
})
31

It was my bad. I had by mistake put wrappingColumn outside javascript object.
should be like this.
{ key: “card1”, isGroup: true, size: “140 230”, lay: { horizontal: true, wrappingCol:1, }, group: “shelf” }

Thanks

32

Hi, Can I wrap items in gridLayout vertically similar to horizontal rows wrapping in GridLayout?

My requirement is to arrange items vertically (which is already achieved using GridLayout) and wrap items in next column(let say after 5th node, 6th node should come in next column)

33

Sorry, but no, GridLayout does not support that. I suggest that you implement it yourself in a custom Layout.

34

Is there any way I can set limit to number of nodes in a column in a grid layout?

35

Is there any way I can create fixed no of rows and columns in a grid layout?

36

As I said, GridLayout is only row-oriented, so the answers are “no”. That is why you should implement what you want yourself.