Overflow texts in horizontal panel

GoJS
1

Prev code

          $(
                go.TextBlock,
                {
                   maxLines: 1,
                   overflow: go.TextBlock.OverflowEllipsis,
                   margin: new go.Margin(8, 14, 8, 14),
                 }
                new go.Binding("text", "title").makeTwoWay(),
)

above code looks like
image

Now I want to accomodate 2 text with different styles
Current code

  $(
            go.Panel,
              "Horizontal",
                 {
                  margin: new go.Margin(8, 14, 8, 14),
                  },
               $( go.TextBlock,
                {
                   font: "1rem"
                 }
                new go.Binding("text", "title").makeTwoWay(),
               ),
               $( go.TextBlock,
                {
                  margin: new go.Margin(0, 0, 0, 6),
                  font: "0.5rem"
                 }
                new go.Binding("text", "subTitle").makeTwoWay(),
             )
      )

image

When i wrap 2 texts in a panel , I want to show ellipsis at the end. how do i show that? overflow isnt working in panel

2

First I should point out that because the TextBlocks are not editable, you should not use TwoWay Bindings on them.

Horizontal panels cannot stretch the way that you want. Change the type of the Panel from “Horizontal” to “Table”, and set column on each TextBlock to zero and one, respectively.

Set on that Panel:

stretch: go.GraphObject.Horizontal,
columnSizing: go.RowColumnDefinition.None,
3

as suggested i did this but it isnt working

    $(
                go.Panel,
                "Table",
                {
                  alignment: go.Spot.Center,
                  stretch: go.GraphObject.Horizontal,
                  columnSizing: go.RowColumnDefinition.None,
                  margin: new go.Margin(8, 14, 8, 14),
                },
                // title text
                $(
                  go.TextBlock,
                  {
                    maxLines: 1,
                    editable: true,
                    row: 0,
                    column: 0,
                    overflow: go.TextBlock.OverflowEllipsis,
                  },
                  new go.Binding("text", "title").makeTwoWay()
                ),
                // subtitle text
                $(
                  go.TextBlock,
                  {
                    maxLines: 1,
                    row: 0,
                    column: 1,
                    margin: new go.Margin(0, 0, 0, 6),
                    overflow: go.TextBlock.OverflowEllipsis,
                  },
                new go.Binding("text", "subTitle")
                )
              ),
4

What result are you getting?

5

image

6

There isn’t any support for ellipsis on both ends of text. Try setting alignment: go.Spot.Left. instead of Center.

7

image
I have set it to left but i still dont see ellipsis at the end

8

Here’s what I just tried:

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    { resizable: true },
    $(go.Shape, { fill: "white" },
      new go.Binding("fill", "color")),
    $(go.Panel, "Vertical",
      { stretch: go.GraphObject.Fill, margin: 2, defaultAlignment: go.Spot.Left },
      $(go.TextBlock, "TopHeader", { maxLines: 1 }),
      $(go.Panel, "Table",
        { stretch: go.GraphObject.Horizontal, defaultAlignment: go.Spot.Left, columnSizing: go.RowColumnDefinition.None },
        $(go.TextBlock,
          { column: 0, maxLines: 1 },
          new go.Binding("text")),
        $(go.TextBlock,
          { column: 1, maxLines: 1, overflow: go.TextBlock.OverflowEllipsis, stretch: go.GraphObject.Horizontal },
          new go.Binding("text", "text2"))
      ),
      $(go.TextBlock, "BottomFooter", { maxLines: 1 }),
    )
  );

myDiagram.model = new go.GraphLinksModel(
[
  { key: 1, text: "Alpha", text2: "lightblue" },
]);

The results, at various node panel widths:
image

The header and footer elements don’t really matter, and the containing Panel can be either “Vertical” or “Table”. But the Panel holding the two TextBlocks has to be a “Table” panel in order to control how things stretch. “Horizontal” Panels can stretch horizontally, but they cannot pass on horizontal constraints to their elements.

Note that the first TextBlock (“Alpha”) doesn’t get ellipsis because the TextBlock is not being forced to be narrower than it wants to be – instead it’s just being clipped. Maybe there’s a way to do that – I can experiment. But the extra width is going to the second TextBlock, and when it’s given zero width I don’t see the way to force the first TextBlock to be narrower, when we wouldn’t want it to be narrower when there’s room for the second TextBlock.

9

Thanks a lot , playing with stretch property and rowSizing and columnSizing worked!