Display panel based on the Radio button selection

GoJS
1

I have to display the panel based on the selection of the radio button value,
image

image

how can we achieve it?

2

Define all (two?) of the Panels that you might want to show, and set visible to false on all but the one that you want to show by default, presumably corresponding to the chosen radio button.

When the user clicks on a radio button, make all of the Panels not visible except the one corresponding to the clicked button.

Remember to execute a transaction around all of the code in the click event handler that modifies any state of any GraphObjects. If the node changes size, normally that would cause a layout to be performed again so that everything stays nicely arranged.

3

How can we create a radio button?
I didn’t find anything in sample.

4

Here’s one definition, although the appears is quite different from what you show.

    // Define a common radio button.  The first argument is the radio button label string.
    // The second argument is the name of the data property to which the state is bound;
    // this basically acts as the name of the radio button group too.  So all of the RadioButtons
    // in the same group should be bound to the same name.  Both string arguments are required.
    // $("RadioButton", "Button Label", "dataPropertyName", ...)
    go.GraphObject.defineBuilder("RadioButton", args => {
      const buttonname = go.GraphObject.takeBuilderArgument(args, "");
      if (buttonname === "") throw new Error("no radio button name given as the first argument to RadioButton.");
      const groupname = go.GraphObject.takeBuilderArgument(args, "");
      if (groupname === "") throw new Error("no bound data property name (i.e., radio group name) given as the second argument to RadioButton.");

      const b = $("Button",
        {
          margin: 4,
          "ButtonBorder.stroke": null,
          "ButtonBorder.fill": "transparent"
        },
        $(go.TextBlock, buttonname),
        {
          click: (e, obj) => {
            const model = obj.diagram.model;
            if (obj.diagram.isReadOnly || model.isReadOnly) return;
            model.startTransaction("radio " + buttonname);
            model.setDataProperty(obj.part.data, groupname, buttonname);
            model.commitTransaction("radio " + buttonname);
          }
        }
      );
      const border = b.findObject("ButtonBorder");
      if (border !== null) {
        border.bind("stroke", groupname, f => (f === buttonname) ? "black" : null);
        // in case the mouse is over the button, change its saved stroke value too
        b.bind("_buttonStrokeNormal", groupname, f => (f === buttonname) ? "black" : null);
      }
      return b;
    });

An example usage would be something like:

          $(go.Panel, "Horizontal", { row: 2, alignment: go.Spot.Center },
            $("RadioButton", "All", "filter"),  // RadioButton is defined above
            $("RadioButton", "Active", "filter"),
            $("RadioButton", "Completed", "filter")
          )

Because all of the "RadioButton"s are bound to the same “filter” property, and their visibility is dependent on their name matching the value of data.filter, only one can be “chosen” at a time. (Hmmm, I suppose if two buttons had the same name/label, they would both be chosen or not, but presumably that case should not happen.)