Text OverflowEllipsis when using items array

GoJS
1

I have a textblock in itemsArray, i need to see three dots when there is no space for it in the shape,

look at this picture
image
second row text has three does because there is no space for the text.

the third row is inside Auto panel and in Items Array template.
I can not make the go.TextBlock.OverflowEllipsis to create the three dots.

look at the link below to show the problem, you will need to resize the shape in order to see the problem

2

The purpose of an “Auto” Panel is to surround the main (first) element around the other elements of the panel. Typically this used for supplying a border around those other elements. So it does not make sense to have an “Auto” Panel with only one element in it. Just remove that panel and move its properties onto that single element. So row 1 would just contain a TextBlock, and row 2 would just contain a “Vertical” Panel.

It’s good that you have the “Table” Panel stretch horizontally. You also need to stretch the elements of the “Table” Panel horizontally. To achieve that, you can either set Panel.defaultStretch on the panel or you can set GraphObject.stretch on each element of the panel.

Similarly, you will want the item panels to stretch horizontally. To do that, stretch both the Panel and its TextBlock. Also, I think you want to turn off text wrapping.

    //==========================================
    //  long text
    //========================================
      $(go.TextBlock,
        {
          row: 1,
          overflow: go.TextBlock.OverflowEllipsis,
          stretch: go.GraphObject.Horizontal,
          verticalAlignment: go.Spot.Center,
          textAlign: 'left',
          wrap: go.TextBlock.None,
          alignment: go.Spot.Center,
        },
        new go.Binding('text', 'longText')
      ),

    //==========================================
    //  item array
    //========================================

      $(go.Panel, 'Vertical',
        {
          row: 2,
          columnSpan: 2,
          stretch: go.GraphObject.Horizontal,
          itemTemplate: $(go.Panel,
            { stretch: go.GraphObject.Horizontal },
            $(go.TextBlock,
              {
                row: 1,
                column: 0,
                stretch: go.GraphObject.Horizontal,
                wrap: go.TextBlock.None,
                overflow: go.TextBlock.OverflowEllipsis,
              },
              new go.Binding('text', 'val1')
            )
          ),
        },
        new go.Binding('itemArray', 'items')
      )
3

checking with table , thanks

4

it works also in a table many thanks
//==========================================
// item array
//========================================

  $(
    go.Panel, 'Table',
    {
      row: 2,
      columnSpan: 2,
      alignment: go.Spot.Left,
      stretch: go.GraphObject.Horizontal,

      itemTemplate: $(go.Panel,  
         "TableRow",
         {stretch: go.GraphObject.Horizontal},
         $(
          go.TextBlock,
          {
            text:"column1",
          
            column: 0,
            stroke:"blue",
            wrap: go.TextBlock.None,
            overflow: go.TextBlock.OverflowEllipsis,
          }),

        $(
          go.TextBlock,
          { column: 1,
            margin:new go.Margin(0,0,0,5),
            wrap: go.TextBlock.None,
            stretch: go.GraphObject.Horizontal,
            overflow: go.TextBlock.OverflowEllipsis,
          },
          new go.Binding('text', 'val1')
        )
      ),
    },
    new go.Binding('itemArray', 'items')
  )


)