Rearranging button on group

GoJS
1

Hi sir,
Screenshot from 2023-02-10 17-40-59
I want to move the “Auto connect” button to the right and put a icon inside that butto. But I am not able to do it.

myDiagram.groupTemplate =
            $(go.Group, "Auto",
                {
                    background: "transparent",
                    ungroupable: true,
                    mouseDragEnter: function (e, grp, prev) { highlightGroup(e, grp, true); },
                    mouseDragLeave: function (e, grp, next) { highlightGroup(e, grp, false); },
                    computesBoundsAfterDrag: true,
                    mouseDrop: finishDrop,
                    handlesDragDropForMembers: true,
                    computesBoundsIncludingLocation: true,
                    layout: makeLayout(false)
                },
                // $(CustomPlaceholder,
                //     { padding: 5, alignment: go.Spot.TopLeft }),
                new go.Binding("layout", "horiz", makeLayout),
                new go.Binding("isSubGraphExpanded", "isSubGraphExpanded").makeTwoWay(),
                new go.Binding("background", "isHighlighted", function (h) {
                    return h ? "rgba(255,0,0,0.2)" : "transparent";
                }).ofObject(),
                // new go.Binding("position", "loc", go.Parse.point).makeTwoWay(go.point.stringify),
                $(go.Shape, "Rectangle",
                    { fill: null, stroke: defaultColor(false), strokeWidth: 2, },
                    new go.Binding("stroke", "horiz", defaultColor),
                    new go.Binding("stroke", "color")),
                $(go.Panel, "Vertical",  // title above Placeholder 
                    $(go.Panel, "Horizontal",  // button next to TextBlock
                        { stretch: go.GraphObject.Horizontal, background: defaultColor(false) },
                        new go.Binding("background", "horiz", defaultColor),
                        new go.Binding("background", "color"),
                        $("SubGraphExpanderButton",
                            { alignment: go.Spot.Right, margin: 5 },

                        ),
                        $(go.TextBlock,
                            {
                                alignment: go.Spot.Left,
                                editable: true,
                                margin: 5,
                                font: defaultFont(false),
                                opacity: 0.75,  // allow some color to show through
                                stroke: isDark ? "white" : "#404040"
                            },
                            new go.Binding("text", "viewName").makeTwoWay()),
                        $(go.Panel, "Vertical",
                            { margin: new go.Margin(12, 0, 0, 5) },
                            $("Button",
                                {
                                    click: onClickAutoConnect,
                                    position: new go.Point(0, 100)
                                },
                                $(go.TextBlock, { margin: 5 }, new go.Binding("text","", () =>{ return "Auto Connect"}))
                            ),
                            $(go.TextBlock,
                                new go.Binding("text", "clickCount",
                                    function (c) { return "Clicked " + c + " times."; }))
                        ),
                        new go.Binding("font", "horiz", defaultFont),
                    ),


                    $(go.Placeholder,  // becomes zero-sized when Group.isSubGraphExpanded is false
                        { row: 1, columnSpan: 2, padding: 10, alignment: go.Spot.TopLeft },
                        new go.Binding("padding", "isSubGraphExpanded",
                            function (exp) { return exp ? 10 : 0; }).ofObject())
                )  // end Vertical Panel
            );

Will you please help me how to do this.

2

For the title bar, change the Panel type from “Horizontal” to “Table”.

Wrap the expander button and title TextBlock in a new “Horizontal” Panel. Set the alignment of that new panel to go.Spot.Left, and set the alignment of your “Auto Connect” button to go.Spot.Right.

Regarding the contents of your button, wrap the existing “Auto Connect” TextBlock in a Panel and add your desired icon as either the first or second element of that new panel. Choose the panel type to get the arrangement of those two elements that you want.

3

Thanks, It worked.