Padding in the table layout

GoJS
1

I am using table layout and i want to add the padding in the table
image
like this.
How can i do that ?
I am using table layout extension file.

2

Is that a Group holding those nine nodes? How have you defined that Group?

3

Yes i am using group

this.diagram.groupTemplateMap.add(templateName, $(go.Group, 'Auto',
            {
                layerName: 'Background',
                stretch: go.GraphObject.Fill,
                selectable: false,
                computesBoundsAfterDrag: false,
                computesBoundsIncludingLocation: true,
                handlesDragDropForMembers: false,  // don't need to define handlers on member Nodes and Links
                mouseDragEnter: function (e: go.InputEvent, group: any, prev: go.GraphObject) { group.isHighlighted = true; },
                mouseDragLeave: function (e: go.InputEvent, group: any, next: go.GraphObject) { group.isHighlighted = false; },
                mouseDrop: (e, obj) => this.gridColumnTemplateMouseDropHandler(e, obj)
            },
            new go.Binding('row'),
            new go.Binding('column', 'col'),
            $(go.Shape,
                {
                    strokeWidth: 1,
                    fill: 'white',
                    stretch: go.GraphObject.Fill,
                    width: 100,
                    height: 100,
                },
                new go.Binding('stroke', 'isHighlighted', function (h) { return h ? 'red' : 'lightgray'; }).ofObject()),
            $(go.TextBlock,
                {
                    alignment: go.Spot.Center, width: 80, textAlign: 'center',
                    wrap: go.TextBlock.WrapDesiredSize, stroke: 'gray', text: CONSTANTS.DragAndDropBin,
                    font: 'italic 8pt Verdana', name: CONSTANTS.DIAGRAM.DRAG_AND_DROP_NAME
                },
                new go.Binding('visible', 'hasData', data => !data)
            ),
            $(go.TextBlock, {
                alignment: go.Spot.BottomCenter, margin: new go.Margin(0, 0, 10, 0),
                textAlign: 'center', wrap: go.TextBlock.WrapDesiredSize, stroke: '#0a599c', text: '+',
                font: 'bold 14pt Verdana', name: CONSTANTS.DIAGRAM.SKU_PLUS_NAME
            },
                new go.Binding('visible', 'hasData', data => !data)
            ),
        ));```
4

No, I was asking about the Part holding that outer border.
Presumably its Group.layout is that TableLayout.
Are you expecting that border to contract/expand as those nodes are added or removed or moved?

Or did you not want to design that outer Part to be a Group because you don’t want those nine nodes to be members of that group?

I really cannot tell what requirements you have and thus I cannot suggest what might be a good design.

5

So there are two layers
image
behind this there is one more group nodes code is almost same which i given.
And this Drag & Drop SKU/Bin is node above that node.

// Groups Template
this.setupDefaultGroupTemplate();
this.setupGridColumnContainerTemplate();

Calling these function on initialization.
So i want to add padding around the diagram.

6

The group template that you provided is the definition of those “Drag & Drop SKU / Bin” nodes, yes? But that wasn’t what I was asking about. What is the definition of that border that you want to be around those nine nodes?

And you haven’t answered my question whether those nine “Drag & Drop SKU / BIn” nodes are members of a group or not. And if they are, whether or not the group template should use a Placeholder or not.

7

This is the current implementation
image
Now i want to make it look like this ,currently there is no border , the image i had attached is of UI/UX.
image
How can i add that border or padding around the corners.
And yes the group template i provided is the definition of drag and drop sku bin.
BY placeholder what do you mean?
I am new to gojs

8

In that screenshot are you showing a background grid with thick white lines on a light blue background?

9

yes that’s a background grid with thick white lines

grid: $(go.Panel, 'Grid',
                        {
                            gridCellSize: CellSize,
                        },
                        $(go.Shape, 'LineH', { stroke: '#C9E2F8', strokeWidth: 13 }),
                        $(go.Shape, 'LineV', { stroke: '#ffffff', strokeWidth: 4 }),
                    )
10

What about my other questions?