I want to display Borders in pallete

GoJS
1

I want to modify look of pallete as per following.

image.png312×574 101 KB

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

currently it is loaded like following.

image.png376×502 89.5 KB

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()) );

2

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.

3

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 ?

4

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