Resize node column and row automatically

GoJS
1

Hi, how can I change or Resize cells to my node automatically, when central row has many characters?

This is my template node:

myDiagram.nodeTemplate =
      $(go.Node, "Auto",{
          
          fromSpot: go.Spot.Right, 
          toSpot: go.Spot.AllSides 
          },
        $(go.Shape, "Rectangle",  // the border
          { fill: "white", strokeWidth: 2 },
          new go.Binding("fill", "color", function (b) { return b;}),
          new go.Binding("stroke", "color", function (b) { return b;}),
          ),
        $(go.Panel, "Table",
          { padding: 0.5 },
          $(go.RowColumnDefinition, { column: 1, separatorStroke: "black" }),
          $(go.RowColumnDefinition, { column: 2, separatorStroke: "black" }),
          $(go.RowColumnDefinition, { row: 1, separatorStroke: "black", background: "white", coversSeparators: true }),
          $(go.RowColumnDefinition, { row: 2, separatorStroke: "black" }),
          $(go.TextBlock, // earlyStart
            new go.Binding("text", "earlyStart"),
            { row: 0, column: 0, margin: 5, textAlign: "center" }),
          $(go.TextBlock,
            new go.Binding("text", "length"),
            { row: 0, column: 1, margin: 5, textAlign: "center" }),
          $(go.TextBlock,  // earlyFinish
            new go.Binding("text", "",
                           function(d) { return (d.earlyStart + d.length).toFixed(2); }),
            { row: 0, column: 2, margin: 5, textAlign: "center" }),

          $(go.TextBlock,
            new go.Binding("text", "text"),
            { row: 1, column: 0, columnSpan: 3, margin: 5,
              textAlign: "center", font: "bold 14px sans-serif" }),

          $(go.TextBlock,  // lateStart
            new go.Binding("text", "",
                           function(d) { return (d.lateFinish - d.length).toFixed(2); }),
            { row: 2, column: 0, margin: 5, textAlign: "center" }),
          $(go.TextBlock,  // slack
            new go.Binding("text", "",
                           function(d) { return (d.lateFinish - (d.earlyStart + d.length)).toFixed(2); }),
            { row: 2, column: 1, margin: 5, textAlign: "center" }),
          $(go.TextBlock, // lateFinish
            new go.Binding("text", "lateFinish"),
            { row: 2, column: 2, margin: 5, textAlign: "center" })
        )  // end Table Panel
      );  // end Node

My second question is:
How to define a fixed size to the node? and how do I make the text in the second row go down to a second row if it is too long? I do not know how to explain it well

2

mmm i do it (https://gojs.net/latest/intro/textBlocks.html), but I have some questión about this topic, please don’t close the topic

3

The “Table” Panel is what automatically makes sure there is room for all of its elements, in cells.

4

How can I center the text horizontally and vertically?

5

By default an element in a Table cell is centered in both directions. If you declared it as shown in your code above, maybe there is a new line or other characters in the string.

6

I have this code:

    $(go.TextBlock, new go.Binding("text", "text"),
         { row: 1, column: 0, columnSpan: 3, margin: 5, width: 100, height:20 ,isMultiline: true,
         wrap: go.TextBlock.WrapFit, textAlign: "center", font: "bold 10px sans-serif" }),
7

When I use this data in the PERT.html sample:

{ text: "CALCULO", length: 1, earlyStart: 3, lateFinish: 4 },

I get this result:

So I’m not seeing the behavior that you have. I think the problem might be that you have set the width and height of that TextBlock. I recommend that you not do so. If the text does not fit into the width that you specified, the text will wrap, resulting in making it taller.