Textbox text alignment

GoJS
1

Hi,
I’m trying to create some group template with an header that has the group key.
I’m using textblock to put the group header and i want the group header to be in the center of the header.
Here is my Group template. For some reason the text is align to left. I tried to use textAlign, verticalAlignment, strech, in order to centrelize the group name. No Success…

function defaultGroupTemplate() {
var GO = $;
var x =
GO(go.Group, “Vertical”, // Header and group members panel one below each other
{
isSubGraphExpanded: true,
ungroupable: true,
background: “white”,
isShadowed: true,
//doubleClick: function(e, node) { that.expandGroup(node); },
width: 200, height: 300,
defaultStretch: go.GraphObject.Horizontal,
},

                    // Panel for holding COLLAPSED Group Header info
                    GO(go.Panel, "Horizontal",
                            {
                                background: "#124386",
                            },
                            GO("SubGraphExpanderButton", {
                                        alignment: go.Spot.Left,
                                        desiredSize: new go.Size(35,35),
                                    },
                            ),
                            // group name in Header
                            GO(go.TextBlock,
                                    {
                                        font: "bold 14pt rubikregular",
                                        editable: false,
                                        stroke: "white",
                                        margin: 2,
                                        verticalAlignment: go.Spot.TopCenter,
                                        textAlign: "center",
                                        stretch: go.GraphObject.Horizontal,
                                    },
                                    new go.Binding("text", "key").makeTwoWay()
                            ),
                    ),
            ); // end of Header Panel
    return x;
}

Anyi ideas ?

2

Horizontal Panels always place their elements in order by their width, without stretching any of them horizontally. (But of course they do stretch vertically, as you have specified in this case.)

One way to get what you want is to use a Table Panel instead, and give the column with the TextBlock all of the room beyond what the button takes up in column zero.

    myDiagram.groupTemplate =
      $(go.Group, "Vertical", // Header and group members panel one below each other
        {
          isSubGraphExpanded: true,
          ungroupable: true,
          background: "white",
          isShadowed: true,
          //doubleClick: function(e, node) { that.expandGroup(node); },
          width: 200, height: 300,
          defaultStretch: go.GraphObject.Horizontal,
        },
        // Panel for holding COLLAPSED Group Header info
        $(go.Panel, "Table",
          { background: "#124386" },
          $("SubGraphExpanderButton",
            { column: 0, desiredSize: new go.Size(35, 35) }),
          // any extra horizontal space is given to columns other than column zero
          $(go.RowColumnDefinition, { column: 0, sizing: go.RowColumnDefinition.None }),
          // group name in Header
          $(go.TextBlock,
            {
              column: 1,
              font: "bold 14pt rubikregular",
              editable: true,
              stroke: "white",
              margin: 2
            },
            new go.Binding("text").makeTwoWay()
          ),
        ),
      );

Note that this places the header text not in the center of the header, but at the center of the space allotted to the header text. I think this is probably what you want, but not exactly what you asked for. If you really want to put the text in the center, ignoring the button, that can be done too.

3

Looks good,
Thanks