I want to display Borders in pallete

I want to modify look of pallete as per following.

pls suggest how can i create such layout using my template.

currently it is loaded like following.

So i just want to show a slight border to separate nodes of pallete.

following is my current template.

this.palette.nodeTemplate = $(go.Node, "Vertical", { width: 64, height: 75 }, $(go.Picture, { maxSize: new go.Size(48, 48), fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true, toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true }, new go.Binding("source", "ImageURI")), $(go.TextBlock, { margin: new go.Margin(0, 0, 0, 0), maxSize: new go.Size(100, 30), isMultiline: false }, new go.Binding("text", "FullName").makeTwoWay()) );

I suggest that you define the nodes as “Table” Panels, and make sure the Palette.grid and Palette.layout have matching cell sizes. Something like:

      $(go.Palette, "myPaletteDiv",
        {
          grid:
            $(go.Panel, "Grid",
              { gridCellSize: new go.Size(48, 64) },
              $(go.Shape, "LineH", { stroke: "lightgray", strokeWidth: 0.5 }),
              $(go.Shape, "LineV", { stroke: "lightgray", strokeWidth: 0.5 })
            ),
          layout:
            $(go.GridLayout,
              {
                cellSize: new go.Size(48, 64),
                spacing: new go.Size(0, 0)
              }),
          nodeTemplate:
            $(go.Node, "Table",
              $(go.RowColumnDefinition, { row: 0, height: 48 }),
              $(go.RowColumnDefinition, { row: 1, height: 16 }),
              $(go.RowColumnDefinition, { column: 0, width: 48 }),
              $(go.Picture,
                {
                  row: 0,
                  maxSize: new go.Size(48, 48)
                },
                new go.Binding("source")
              ),
              $(go.TextBlock,
                {
                  row: 1,
                  maxSize: new go.Size(48, 16),
                  overflow: go.TextBlock.OverflowEllipsis,
                  isMultiline: false
                },
                new go.Binding("text"))
            )
        })

You might want to decrease the font size and adjust the sizes of the Picture and TextBlock to suit your expected needs.

Thanks, now if the text of the component is large i can see … comes to the end. So is there any way to show a tooltip where user can read full name of it ?

Of course – just add a tooltip to the node template. GoJS Tooltips -- Northwoods Software