Text block overflow ellipsis

GoJS
1

Hi Walter,
Please find the code

this.$(go.Node, "Auto",
      {
        name: "metadataTable",
        selectionObjectName: "metadataTable",
        resizable: true,
        resizeObjectName: "SCROLLER",
        portSpreading: go.Node.SpreadingNone,
      },
      new go.Binding("location", "location").makeTwoWay(),
      new go.Binding("name", "key").makeTwoWay(),
      new go.Binding("opacity", "opacity").makeTwoWay(),
      new go.Binding("visible", "visible").makeTwoWay(),
      this.$(go.Shape, new go.Binding("stroke", "isHighlighted", function(h) {
        return h ? "black" : "#E4E4E4";
      })
        .ofObject(), {
          //figure: "RoundedRectangle",
          fill: Colours.TABLE_BACKGROUD,
          stroke: Colours.TABLE_BACKGROUD
        }),
      this.$(go.Panel, "Vertical", {
        stretch: go.GraphObject.Horizontal,
        alignment: go.Spot.TopLeft,
        name: "mainPanel",
        maxSize : new go.Size(200, NaN),
      },
        this.$(go.Panel, "Table", {
          stretch: go.GraphObject.Horizontal,
          name: "headin",
          background: Colours.MAIN_HEADER_PANEL_BACKGROUND_ITEMS_BACKGROUND,
        },
          this.$(go.TextBlock, {
            name:'headerTextBlock',
            row: 0,
            column: 0,
            alignment: go.Spot.Left,
            margin: 3,
            stroke: Colours.MAIN_HEADER_PANEL_TEXT_COLOUR_ONE,
            font: Colours.TABLE_HEADER_TEXT_BLOCK_STYLE_ONE,
            wrap: go.TextBlock.None,
            overflow: go.TextBlock.OverflowEllipsis,
            fromLinkableDuplicates: false, toLinkableDuplicates: false,
            // click:(e, o)=> {
            //   e.handled = true;
            //   this.changeCategory(e, o.part);
            //
            // }
          },
            new go.Binding("text", "headerText1"),
            new go.Binding("maxSize", "textBoxSize")
          ),
          this.$(go.TextBlock, {
            row: 0,
            column: 1,
            alignment: go.Spot.Left,
            stroke: Colours.MAIN_HEADER_PANEL_TEXT_COLOUR_TWO,
            font: Colours.TABLE_HEADER_TEXT_BLOCK_STYLE_ONE,
            stretch: go.GraphObject.Horizontal,
            wrap: go.TextBlock.None,
            overflow: go.TextBlock.OverflowEllipsis,
            fromLinkableDuplicates: false, toLinkableDuplicates: false,
          },
            new go.Binding("text", "headerText2"))),
        this.$(go.Panel, "Table", {
          stretch: go.GraphObject.Horizontal,
          name: "headin",
                },new go.Binding("background","background"),
          this.$(go.Picture, {
            column: 0,
            alignment: go.Spot.Left,
            //source: "images/table.png",
            width: 16,
            height: 16,
            margin: 2
          }, new go.Binding("source", "tabSrc")),
          this.$(go.TextBlock, {
            column: 1,
            alignment: go.Spot.Left,
            margin: 3,
            stroke: Colours.TABLE_HEADER_FONT_COLOUR,
            font: Colours.TABLE_HEADER_TEXT_BLOCK_STYLE_TWO,
            stretch: go.GraphObject.Horizontal,
            wrap: go.TextBlock.None,
            overflow: go.TextBlock.OverflowEllipsis,
            fromLinkableDuplicates: false, toLinkableDuplicates: false,
            // click:(e, o)=> {
            //   e.handled = true;
            //   this.changeCategory(e, o.part);
            //
            // }
          },
            new go.Binding("text", "headerText3")),
          this.$("PanelExpanderButton", "SCROLLER", {
            column: 3,
            visible: false,
            alignment: go.Spot.Right
          })),
        this.$("ScrollingTable", {
          name: "SCROLLER",
          //  stretch: go.GraphObject.Fill,
          stretch: go.GraphObject.Horizontal,
          visible:false
          //  defaultColumnSeparatorStroke: "gray",
          //defaultColumnSeparatorStrokeWidth: 0.5,
        },
          new go.Binding("TABLE.itemArray", "items"),
          new go.Binding("TABLE.column", "left", (left) => {
            return left ? 0 : 2;
          }),
          //new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
          new go.Binding("desiredSize", "size").makeTwoWay(), {
            "TABLE.itemTemplate": this.$(go.Panel, "TableRow", {
              defaultStretch: go.GraphObject.Horizontal,
              //  fromSpot: go.Spot.RightSide,
              //toSpot: go.Spot.LeftSide,
              fromSpot: go.Spot.Right,  // links only go from the right side to the left side
              toSpot: go.Spot.Left,
              fromEndSegmentLength: 25,
            }, new go.Binding("background", "row",
              function(i) { return i % 2 === 0 ? "#f2f2f2" : "transparent" })
              .ofObject(),
              new go.Binding("portId", "key"),
              new go.Binding("portTechProps","techProperties"), 
              this.$(go.Picture, {
                column: 0,
                width: 10,
              }, new go.Binding("source", "colSrc")),
              this.$(go.TextBlock, {
                column: 1,
                stretch: go.GraphObject.Horizontal,
                wrap: go.TextBlock.None,
                font: Colours.TABLE_ITEMS_TEXT_BLOCK_STYLE,
                overflow: go.TextBlock.OverflowEllipsis,
              }, new go.Binding("text", "name"))
            ),
            "TABLE.defaultColumnSeparatorStroke": "gray",
            "TABLE.defaultColumnSeparatorStrokeWidth": 0.5,
            "TABLE.defaultRowSeparatorStroke": "white",
            "TABLE.defaultRowSeparatorStrokeWidth": 0.5,
            "TABLE.defaultSeparatorPadding": new go.Margin(1, 3, 0, 3),
            "TABLE.background": Colours.TABLE_BACKGROUD
          }
        ),
      
      )
    );

with these template ellipses work fine and picture is
ellipseoriginal

now i want to add a another image beside the text which, i want to make dynamically visible and invisible so now i changed my template to

this.$(go.Node, "Auto",
      {
        name: "metadataTable",
        selectionObjectName: "metadataTable",
        resizable: true,
        resizeObjectName: "SCROLLER",
        portSpreading: go.Node.SpreadingNone,
      },
      new go.Binding("location", "location").makeTwoWay(),
      new go.Binding("name", "key").makeTwoWay(),
      new go.Binding("opacity", "opacity").makeTwoWay(),
      new go.Binding("visible", "visible").makeTwoWay(),
      this.$(go.Shape, new go.Binding("stroke", "isHighlighted", function(h) {
        return h ? "black" : "#E4E4E4";
      })
        .ofObject(), {
          //figure: "RoundedRectangle",
          fill: Colours.TABLE_BACKGROUD,
          stroke: Colours.TABLE_BACKGROUD
        }),
      this.$(go.Panel, "Vertical", {
        stretch: go.GraphObject.Horizontal,
        alignment: go.Spot.TopLeft,
        name: "mainPanel",
        maxSize : new go.Size(200, NaN),
      },
        this.$(go.Panel, "Table", {
          stretch: go.GraphObject.Horizontal,
          name: "headin",
          background: Colours.MAIN_HEADER_PANEL_BACKGROUND_ITEMS_BACKGROUND,
        },
          new go.Binding("visible", "panelheader1Visibility"),
          this.$(go.TextBlock, {
            name:'headerTextBlock',
            row: 0,
            column: 0,
            alignment: go.Spot.Left,
            margin: 3,
            stroke: Colours.MAIN_HEADER_PANEL_TEXT_COLOUR_ONE,
            font: Colours.TABLE_HEADER_TEXT_BLOCK_STYLE_ONE,
            wrap: go.TextBlock.None,
            overflow: go.TextBlock.OverflowEllipsis,
            fromLinkableDuplicates: false, toLinkableDuplicates: false,
            // click:(e, o)=> {
            //   e.handled = true;
            //   this.changeCategory(e, o.part);
            //
            // }
          },
            new go.Binding("text", "headerText1"),
            new go.Binding("maxSize", "textBoxSize")
          ),
          this.$(go.TextBlock, {
            row: 0,
            column: 1,
            alignment: go.Spot.Left,
            stroke: Colours.MAIN_HEADER_PANEL_TEXT_COLOUR_TWO,
            font: Colours.TABLE_HEADER_TEXT_BLOCK_STYLE_ONE,
            stretch: go.GraphObject.Horizontal,
            wrap: go.TextBlock.None,
            overflow: go.TextBlock.OverflowEllipsis,
            fromLinkableDuplicates: false, toLinkableDuplicates: false,
          },
            new go.Binding("text", "headerText2"))),
        this.$(go.Panel, "Table", {
          stretch: go.GraphObject.Horizontal,
          name: "headin",
                },new go.Binding("background","background"),
          this.$(go.Picture, {
            column: 0,
            alignment: go.Spot.Left,
            //source: "images/table.png",
            width: 16,
            height: 16,
            margin: 2
          }, new go.Binding("source", "tabSrc")),
          this.$(go.TextBlock, {
            column: 1,
            alignment: go.Spot.Left,
            margin: 3,
            stroke: Colours.TABLE_HEADER_FONT_COLOUR,
            font: Colours.TABLE_HEADER_TEXT_BLOCK_STYLE_TWO,
            stretch: go.GraphObject.Horizontal,
            wrap: go.TextBlock.None,
            overflow: go.TextBlock.OverflowEllipsis,
            fromLinkableDuplicates: false, toLinkableDuplicates: false,
          },
            new go.Binding("text", "headerText3")),
          this.$("PanelExpanderButton", "SCROLLER", {
            column: 3,
            visible: false,
            alignment: go.Spot.Right
          })),
        this.$("ScrollingTable", {
          name: "SCROLLER",
          //  stretch: go.GraphObject.Fill,
          stretch: go.GraphObject.Horizontal,
          visible:false
          //  defaultColumnSeparatorStroke: "gray",
          //defaultColumnSeparatorStrokeWidth: 0.5,
        },
          new go.Binding("TABLE.itemArray", "items"),
          new go.Binding("TABLE.column", "left", (left) => {
            return left ? 0 : 2;
          }),
          //new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
          new go.Binding("desiredSize", "size").makeTwoWay(), {
            "TABLE.itemTemplate": this.$(go.Panel, "TableRow", {
              defaultStretch: go.GraphObject.Horizontal,
              //  fromSpot: go.Spot.RightSide,
              //toSpot: go.Spot.LeftSide,
              fromSpot: go.Spot.Right,  // links only go from the right side to the left side
              toSpot: go.Spot.Left,
              fromEndSegmentLength: 25,
            }, new go.Binding("background", "row",
              function(i) { return i % 2 === 0 ? "#f2f2f2" : "transparent" })
              .ofObject(),
              new go.Binding("portId", "key"),
              new go.Binding("portTechProps","techProperties"),
              this.$(go.Picture, {
                            column: 0,
                            width: 10,
                          }, new go.Binding("source", "colSrc")),
                          this.$(go.Panel, "Horizontal",
                                { column: 1,},
                          this.$(go.Picture, {
                            width: 15,
                            height:12,
                            visible:true,
                            source:"./images/unlock.png"
                          }),
                          this.$(go.TextBlock, {
                            //column: 1,
                        //    stretch: go.GraphObject.Horizontal,
                            wrap: go.TextBlock.None,
                            font: Colours.TABLE_ITEMS_TEXT_BLOCK_STYLE,
                            overflow: go.TextBlock.OverflowEllipsis,
                          //  isPanelMain:true
                          //  maxSize: new go.Size(2, NaN),
                          }, new go.Binding("text", "name"))
                        )),
            "TABLE.defaultColumnSeparatorStroke": "gray",
            "TABLE.defaultColumnSeparatorStrokeWidth": 0.5,
            "TABLE.defaultRowSeparatorStroke": "white",
            "TABLE.defaultRowSeparatorStrokeWidth": 0.5,
            "TABLE.defaultSeparatorPadding": new go.Margin(1, 3, 0, 3),
            "TABLE.background": Colours.TABLE_BACKGROUD
          }
        ),

      )
    );

after the change i am unable to see any elipses.
ellipseafter

help me with this.

2

I’ve had to format your code and remove unrelated stuff such as tooltips and context menus and adornments so that I could get a chance to understand your code. Please don’t dump all of your code here – just post the relevant code (in your case the Panel with the itemsArray binding) and excise irrelevant code.

And use lines consisting of only triple-backquotes to get the code formatted by the forum.

My guess is that you inserted a “Horizontal” Panel in a place where it didn’t make sense – a “TableRow” Panel. That causes the TextBlock width not to be limited by the containing panels.

3

sorry for that excise code,can you give any sample or any hint. so, that i can solve.

4

Don’t put a “Horizontal” Panel into a “TableRow” Panel. Insert columns instead?

5

Ok,But when I make image invisible. A empty column(space) will be seen. Then can I remove a empty column dynamically?

6

Because some of the rows will show the extra Picture and some will not? Yes, the purpose of columns is that they have the same width and same location for the length of the table.

And you can’t replace the one Picture with a Horizontal Panel in the same column holding two Pictures (with one possibly not visible) for the same reason – the whole column will be as wide as the widest cell in that column.

So is the extra space taken up by this optional Picture supposed to eat into the space occupied by the TextBlock? OK, instead of wrapping the TextBlock with a “Horizontal” Panel, use a nested “Table” Panel. Make sure it stretches horizontally just as the TextBlock did before (and the TextBlock should continue to stretch). And of course it should be in the same column as the original TextBlock. The new Picture should be in the nested Table Panel’s column 0 and the TextBlock should be in the nested Table Panel’s column 1.

7

I will try to do it, and I think, with the nested table also. We have the same thing Of having empty column if image is invisible?

8

That nested Table Panel only has two elements in it: your new Picture and the old TextBlock. If that Picture is not visible, it won’t take any space and thus column zero won’t have any width. Meanwhile because the TextBlock stretches, it will occupy as much horizontal space as it needs, up to the width determined by the TableRow Panel.