Want to remove space between Table panel rows

sandip · May 28, 2025, 5:23am

I have used Tabel Panel inside my group template having rectangular shape.
but the rows showing space/line between I want to remove these lines.

I have already tried below properties in Tabel Panel
defaultRowSeparatorStroke: null, defaultRowSeparatorStrokeWidth: 0,
defaultColumnSeparatorStroke: null

and also, separatorStroke: null, separatorStrokeWidth: 0 implemented in RowColumnDefinition.

Above Properties does not help me.

Node Sample:

Issue: light white lines present in node I want to remove

Below is the table panel I have used:

$(go.Panel, "Table",
          {margin: 0.5, stretch: go.GraphObject.Horizontal, alignment: go.Spot.Center,
		   defaultRowSeparatorStroke: null,
            defaultRowSeparatorStrokeWidth: 0,
            defaultColumnSeparatorStroke: null}, 
          $(go.RowColumnDefinition, {row: 0,height: 12,separatorStroke: null,separatorStrokeWidth: 0},
            new go.Binding("background", "", setColorForGroupNode).ofObject(),
          ),
          $(go.RowColumnDefinition, {row: 1,height: 22,separatorStroke: null,separatorStrokeWidth: 0},
            new go.Binding("background", "", setColorForGroupNode).ofObject(),
          ),
          $(go.RowColumnDefinition, {row: 2,height: 12,separatorStroke: null,separatorStrokeWidth: 0},
            new go.Binding("background", "", setColorForGroupNode).ofObject(),
          ),
          $(go.RowColumnDefinition, {  column: 1,minimum: 40},
          ),
          $("SubGraphExpanderButton", "Auto", {row: 1, column: 0, margin: 5, name: "Expand", minSize: new go.Size(10, NaN),},
          ),
          $(go.Panel, "Horizontal",{row: 1,column: 1,height: 18, alignment: go.Spot.Center,},
            $(go.TextBlock, 
            {
              row: 1,font: "15px sans-serif",
              margin: 3,stretch: go.GraphObject.Horizontal,
              editable: false,name: 'myTextBlock',
              height: 16,textAlign: "center"
            },
            new go.Binding("text", "text"),
            ),
            $(go.TextBlock,
            {
               text: "*",name: 'myTextBlock',
               row: 1,stroke: "#000000",
               margin: new go.Margin(0, 10, 11, 0),
               textAlign: "center",isMultiline: false,
               editable: false,height: 10,
               font: "24px sans-serif",
            }),
          $(go.TextBlock, {
              row: 2, columnSpan: 2,
              margin: 1,alignment: go.Spot.BottomRight,
              font: "9pt Sans-Serif",
            },
            new go.Binding("text", "extension").ofObject(),
          ),
          $(go.TextBlock, {
              row: 2,columnSpan: 2,margin: 1,
              alignment: go.Spot.BottomLeft,
              font: "8pt Sans-Serif",
            },
            new go.Binding("text", "reference").ofObject(),
          ),
          $(go.TextBlock, {
              row: 0, columnSpan: 2,margin: 1,
              alignment: go.Spot.TopLeft,
              font: "8pt Sans-Serif",
            },
            new go.Binding("text", "type").ofObject(),
          ),
          $(go.Placeholder,  // becomes zero-sized when Group.isSubGraphExpanded is false
            {
              row: 3,column: 1,
              padding: new go.Margin(25, 25, 25, 25),
              minSize: new go.Size(0, NaN),
              stretch: go.GraphObject.Horizontal,
            },
          )
        ),
		)

walter · May 28, 2025, 10:25am

I think that is an artifact from antialiased rendering.

Instead of specifying the same color in multiple rows, just specify the background for the whole header or whatever it is whose background you want to control.

Are you sure that you have nested the elements correctly? After reformatting your code, it appears that your “Table” Panel has only two elements in it: a “SubgraphExpanderButton”, and a “Horizontal” Panel, both in row 1, with nothing in row 0 or row 2. That “Horizontal” Panel has several TextBlocks and a Placeholder. Because they are in the “Horizontal” Panel, all of those settings of row or column have no effect.

Here’s what I would guess I would do:

Panel, "Vertical", defaultAlignment: go.Spot.TopLeft
    Panel
        new go.Binding("background", "", ...).ofObject()
        Panel, "Horizontal", margin: new go.Margin(12, 5)
            "SubgraphExpanderButton"
            TextBlocks...
    Placeholder

I don’t think anything needs a Horizontal stretch, except maybe the whole “Vertical” Panel to fit in whatever it’s within.

sandip · May 28, 2025, 11:19am

Hi,

I want table background is transparent.
Nested structure is also correct to full fill my requirements.
row 0 and row 2 are used to fill text dynamically

Note: 1. I need table background transparent to make visiblelinkages after group expand.
Do you have any other solution?
Another samples of group node:

walter · May 28, 2025, 11:24am

OK, change my “Horizontal” Panel to be a “Table”. There only needs to be two elements in the “Vertical” Panel: the header panel and the Placeholder.

Panel, "Vertical", defaultAlignment: go.Spot.TopLeft
    Panel
        new go.Binding("background", "", ...).ofObject()
        Panel, "Table"
            "SubgraphExpanderButton"
            TextBlocks...
    Placeholder

walter · May 28, 2025, 12:23pm

Here’s what I just tried:

  new go.Group("Auto")
    .bindTwoWay('isSubGraphExpanded')
    .add(
      new go.Shape("RoundedRectangle", { fill: "transparent" }),
      new go.Panel("Vertical")
        .add(
          new go.Panel("Table", { row: 0, stretch: go.Stretch.Horizontal, background: "slateblue" })
            .bind("background", "color")
            .addColumnDefinition(0, { sizing: go.Sizing.None })
            .add(
              go.GraphObject.build("SubGraphExpanderButton", {
                  row: 1,
                  column: 0,
                  alignment: go.Spot.Left,
                  margin: 4
                }),
              new go.TextBlock({
                  row: 1,
                  column: 1,
                  stroke: "white",
                  overflow: go.TextOverflow.Ellipsis,
                  maxLines: 1,
                  stretch: go.Stretch.Horizontal,
                  margin: 4
                })
                .bind("text"),
              new go.TextBlock("left", { row: 0, column: 0, alignment: go.Spot.TopLeft }),
              new go.TextBlock("right", { row: 0, column: 1, alignment: go.Spot.TopRight }),
              new go.TextBlock("left", { row: 2, column: 0, alignment: go.Spot.BottomLeft }),
              new go.TextBlock("right", { row: 2, column: 1, alignment: go.Spot.BottomRight }),
            ),
          new go.Placeholder({ row: 1, padding: 10, stretch: go.Stretch.Horizontal })
        )
    )

Or, if you don’t like that gap between the header and the “RoundedRectangle” border, try this:

function infoStyle(tb) {
  tb.font = "8pt sans-serif";
  tb.bind("stroke", "color", c => go.Brush.isDark(c) ? "white" : "black")
}

myDiagram.groupTemplate =
  new go.Group("Auto")
    .bindTwoWay("location", "location", go.Point.parse, go.Point.stringify)
    .bindTwoWay('isSubGraphExpanded')
    .add(
      new go.Shape("RoundedRectangle", {
          fill: "transparent", stroke: "gray",
          spot1: go.Spot.TopLeft, spot2: go.Spot.BottomRight,
        }),
      new go.Panel("Vertical", { defaultStretch: go.Stretch.Horizontal })
        .add(
          new go.Panel("Auto", { row: 0 })
            .add(
              new go.Shape("RoundedRectangle", {
                  parameter1: 4.5, parameter2: 1 | 2, margin: 0.5,
                  fill: "lightgray", strokeWidth: 0
                })
                .bind("fill", "color")
                .bind("parameter2", "isSubGraphExpanded", e => e ? 1|2 : 1|2|4|8 ),
              new go.Panel("Table", { stretch: go.Stretch.Fill })
                .add(
                  new go.Panel("Table", {
                      row: 1, columnSpan: 2, alignment: go.Spot.Left,
                      //stretch: go.Stretch.Fill
                    })
                    .addColumnDefinition(0, { sizing: go.Sizing.None })
                    .add(
                      go.GraphObject.build("SubGraphExpanderButton", {
                          column: 0, margin: 4
                        }),
                      new go.TextBlock({
                          column: 1, margin: 4,
                          overflow: go.TextOverflow.Ellipsis, maxLines: 1,
                          stretch: go.Stretch.Fill,
                          alignment: go.Spot.Left,
                          font: "bold 11pt sans-serif"
                        })
                        .bind("text")
                        .bind("stroke", "color", c => go.Brush.isDark(c) ? "white" : "black")
                    ),
                  new go.TextBlock("t-left", { row: 0, column: 0, alignment: go.Spot.TopLeft })
                    .apply(infoStyle),
                  new go.TextBlock("t-right", { row: 0, column: 1, alignment: go.Spot.TopRight })
                    .apply(infoStyle),
                  new go.TextBlock("b-left", { row: 2, column: 0, alignment: go.Spot.BottomLeft })
                    .apply(infoStyle),
                  new go.TextBlock("b-right", { row: 2, column: 1, alignment: go.Spot.BottomRight })
                    .apply(infoStyle)
                )
            ),
          new go.Placeholder({ row: 1, padding: 10 })
        )
    )

I also added bindings to the TextBlocks so that they are either white or black depending on the chosen color.

sandip · May 29, 2025, 9:35am

Below textblock is missed out in above structure, I want to set * as superscript next to the node name

$(go.TextBlock,
            {
               text: "*",name: 'myTextBlock',
               row: 1,stroke: "#000000",
               margin: new go.Margin(0, 10, 11, 0),
               textAlign: "center",isMultiline: false,
               editable: false,height: 10,
               font: "24px sans-serif",
            }),

Sample node:

walter · May 29, 2025, 6:00pm

I don’t understand the problem. Just add an asterisk to the text string. Let’s say you want to make it conditional on some data property, which I’ll name “asterisk”, that when true causes the asterisk to be appended to the string. Replace:

    .bind("text")

with:

    .bind("text", "", data => data.text + (data.asterisk ? "*" : ""))

sandip · May 30, 2025, 4:47am

Ohk, but by binding asterisk " * " with node text I am not able to manage the width and height or other properties of asterisk " * " only.

and also, I want node text in center and subgraph Expander button in left side.
Currently both are in left side.

walter · May 30, 2025, 8:12am

That’s true, and maybe you want something other than asterisk too. OK, have it be a separate TextBlock (or any other GraphObject) in column 2 and add a RowColumnDefinition with sizing None:

  .addColumnDefinition(2, { sizing: go.Sizing.None })

sandip · June 6, 2025, 12:52pm

Hi
I have successfully implemented the group structure.

However, I’m facing an issue with the current group setup. By default, I’m hiding the linkages behind the group node. But when a link is selected, I want the link to appear in front of the node using the following property:

LinkTemplate:
new go.Binding(“zOrder”, “isSelected”,
sel => sel ? 1 : 0).ofObject(), //After select link come in front

Note: This property works correctly with the old structure, but it’s not functioning as expected with the current group structure.

walter · June 6, 2025, 1:12pm

Part.zOrder only affects the z-ordering within the Layer. I wouldn’t bother with that Binding.

Usually, one implements something like this Binding that you can see in many of our samples on a selectable Node or Link:

  // temporarily put selected nodes in Foreground layer
  .bindObject('layerName', 'isSelected', s => s ? 'Foreground' : '')

Specify the desired layerName when it’s not selected – here that sample assumed the Node was in the default layer, named “”.

sandip · June 8, 2025, 9:58am

Hi
I have tried the above binding, but it doesn’t help with link selection. I’m unable to select a link within the group node area.
Do you have any real-time examples of this?

walter · June 8, 2025, 10:42am

I thought you were asking about how to make sure that a selected Link (or Node) would always be shown in front of unselected Nodes or Links.

If the Group has a non-null background or Shape.fill, then no mouse or finger or stylus events will go through the Group to any GraphObjects that are behind the Group, including those Links. Either you need to make the Group hollow by using null as the background or fill, or you need to have the Group be behind the Links that you want to be able to click on.

By the way, you can more easily redact the text in your screenshots by temporarily setting TextBlock.background to whatever your TextBlock.stroke is.