Selection dropdown menu

I want to make a selection dropdown menu which can have different option using gojs from which i can select one and save.
Custom Text Editor | GoJS I am not able to use this in the typescript angular.
I want to make it using gojs only.
Any sample would be great.

Could you please specify what you want? It sounds like you want something not implemented in HTML. A sketch or screenshot would be helpful along with a description of the behaviors that can occur. How should it be invoked, what can users do, and what are the results?

and when i click on it, it should open this list.
once i select it should display the selected value like below

I don’t understand why you can’t use the HTML selection box editor GoJS/extensionsJSM/TextEditorSelectBox.ts at master · NorthwoodsSoftware/GoJS · GitHub

But yes that can be implemented in GoJS. If you still want it I can work on that for you.

Sure, i will try it and let you know. Thanks Walter.

(the pointer is over the “Gamma” choice)

Of course you’ll want to style this the way that you want…

<!DOCTYPE html>
  <title>Simple Choices Selector Adornment</title>
  <!-- Copyright 1998-2024 by Northwoods Software Corporation. -->
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:400px"></div>
  <textarea id="mySavedModel" style="width:100%;height:150px"></textarea>

  <script src=""></script>
  <script id="code">
const myDiagram =
  new go.Diagram("myDiagramDiv", {
      "BackgroundSingleClicked": e => showChoices(null),
      "undoManager.isEnabled": true,
      "ModelChanged": e => {     // just for demonstration purposes,
        if (e.isTransactionFinished) {  // show the model data in the page's TextArea
          document.getElementById("mySavedModel").textContent = e.model.toJson();

// the Adornment holding the list of choices
const ChoicesAdornment =
  new go.Adornment("Spot")
      new go.Placeholder(),  // placeholder for the TextBlock in the Node
      new go.Panel("Auto", { alignment: go.Spot.BottomLeft, alignmentFocus: go.Spot.TopLeft })
          new go.Shape("RoundedRectangle", { fill: "white", stroke: "gray", strokeWidth: 2 }),
          new go.Panel("Vertical", {
              margin: 4,
              defaultStretch: go.Stretch.Horizontal,
                new go.Panel({
                    isActionable: true,  // to allow a click event in an Adornment
                    click: (e, item) => {
                      const tb = item.part.adornedPart.findObject("TB");
                      if (!tb) return;
                      e.diagram.commit(diag => {
                        tb.text =;
                    // for mouse-over highlighting
                    background: "transparent",
                    mouseEnter: (e, item) => item.background = "cyan",
                    mouseLeave: (e, item) => item.background = "transparent"
                    new go.TextBlock({ margin: 1 })
                      .bind("text", "")  // TextBlock.text gets the whole Array item value
            .bind("itemArray", "choices")

function showChoices(node) {
  myDiagram.commit(diag => {
    if (!node) {
      const oldnode = ChoicesAdornment.adornedPart;
      if (oldnode) {
        const oldshp = oldnode.findObject("SHP");
        if (oldshp) oldshp.figure = "LineDown";
    } else {
      const tb = node.findObject("TB");
      const shp = node.findObject("SHP");
      if (!tb || !shp) return;
      showChoices(null);  // remove from any other node
      shp.figure = "LineUp";
      const ad = ChoicesAdornment;
      ad.adornedObject = tb;
      node.addAdornment("Choices", ad);
      if (!Array.isArray( || === 0) { = { choices: ["Alpha", "Beta", "Gamma", "Delta"] };  // default choices Array
  }, null);  // skipsUndoManager

myDiagram.nodeTemplate =
  new go.Node("Auto")
      new go.Shape({ fill: "white" }),
      new go.Panel("Vertical")
          new go.TextBlock({ margin: 4, font: "bold 12pt sans-serif" })
            .bind("text", "title"),
          new go.Panel("Horizontal", {
              click: (e, pnl) => {  // show or hide the ChoicesAdornment
                e.handled = true;
                showChoices((pnl.findObject("SHP").figure === "LineDown") ? pnl.part : null);
              // for mouse-over highlighting
              background: "transparent",
              mouseEnter: (e, pnl) => pnl.background = "lightgray",
              mouseLeave: (e, pnl) => pnl.background = "transparent"
              new go.TextBlock("(choose)", {
                  name: "TB",
                  width: 100,
                  margin: new go.Margin(4, 4, 2, 4),
                  font: "italic 10pt sans-serif",
                  stroke: "blue"
                .bindTwoWay("text", "value")
                .bind("font", "value", v => v ? "bold 10pt sans-serif" : "italic 10pt sans-serif")
                .bind("stroke", "value", v => v ? "black" : "blue"),
              new go.Shape("LineDown", {
                name: "SHP",
                width: 14, height: 12,
                margin: 2,
                strokeWidth: 2,

myDiagram.model = new go.GraphLinksModel(
  { key: 1, title: "Alpha", choices: ["one", "two", "three"], value: "one" },
  { key: 2, title: "Beta", choices: ["hello", "goodbye"] },
  { key: 3, title: "Gamma", choices: ["only"] },
  { key: 4, title: "Delta" },  // use a default choices Array

Hi Walter
I wanted to close the selection dropdown option menu if i am clicking outside the dropdown.
How to do that?

Doesn’t the sample I gave you above do that?

The basic idea is to implement a background single-click listener that removes that Adornment.

One more doubt, I have implemented it using the go.HtmlInfo too,
The only issue i am encountering is that , i have to click three times for opening the dropdown.

In first click it is selecting the node , in second it is showing the dropdown open button and in the third click it is opening the dropdown list.

You can make a couple changes to reduce the number of clicks needed:

  • Set TextEditingTool.starting to TextEditingStarting.SingleClick.
  • Add a ‘change’ event listener on the HTML <select> element

Unfortunately, <select> elements can’t be expanded programmatically.


Thanks Jhardy