Not able to check the checkbox

GoJS
1

when i click on the checkbox , nothing happens (neither it appears checked in starting)
Expected behaviour - to check the checkbox when clicked on it.
Also , how do i set z-index on the panel , this graph edge is coming on top of it

image

Code

  $(
              go.Panel,
              "Vertical",
              {
                alignment: go.Spot.Right,
              },
              $(
                go.Panel,
                "Vertical",
                new go.Binding("itemArray", "applications"),
                {
                  alignment: go.Spot.Left,
                  itemTemplate: $(
                    go.Panel,
                    "Vertical",
                    $(
                      "CheckBox",
                      "true",
                      $(
                        go.TextBlock,
                        { margin: new go.Margin(0, 0, 0, 10) },
                        new go.Binding("text", "")
                      )
                    )
                  ),
                }
              )
            ),
2

Note that the “true” argument when making a “CheckBox” names a data property, in this case on each item in the data.applications Array. Hmmm, but your TextBlock.text Binding seems to be using the whole array item as a string, so there’s no useful property to modify on the string. Where did you want the boolean value to be stored?

Instead of naming a data property for the “CheckBox” to toggle, you could supply an empty string and implement your own click event handler. There’s an example in the extensions/Buttons.js file, and I think in the extensions/CheckBoxes.html sample.

3

got it

I have changed my data and code to look like this
but i am not able to uncheck it now

applications: [
  {
    label: "Application 1",
    selected: true,
  },
  {
    label: "Application 2",
    selected: true,
  },
],

  $(
                go.Panel,
                "Vertical",
                new go.Binding("itemArray", "applications"),
                {
                  alignment: go.Spot.Left,
                  itemTemplate: $(
                    go.Panel,
                    "Vertical",
                    {
                      margin: new go.Margin(10, 10, 10, 10),
                    },
                    $(
                      "CheckBox",
                      "selected",
                      $(
                        go.TextBlock,
                        { margin: new go.Margin(0, 0, 0, 10) },
                        new go.Binding("text", "label")
                      )
                    )
                  ),
                }
              )
4

When I try your code, it correctly modifies the data.selected property of the corresponding “applications” Array item. And when you show the context menu again, you can see the updated state.

Here’s your code that I used. Oh, I changed alignment, which aligns the whole Adornment Panel, to defaultAlignment, which provides the default alignment for each element in the panel. And there’s no point in using a “Vertical” Panel when there’s only one element in it – the “CheckBox”.

          contextMenu:
            $(go.Adornment, "Vertical",
              new go.Binding("itemArray", "applications"),
              {
                defaultAlignment: go.Spot.Left,
                itemTemplate: $(go.Panel,
                  {
                    margin: new go.Margin(10, 10, 10, 10),
                  },
                  $("CheckBox",
                    "selected",
                    $(go.TextBlock,
                      { margin: new go.Margin(0, 0, 0, 10) },
                      new go.Binding("text", "label")
                    )
                  )
                ),
              }
            )
5

No , I mean it looks like this
image

but on clicking on checkboxes , it doesnt deselect them.
Does it has anything to do with z-index?

6

Here’s my complete sample:

<!DOCTYPE html>
<html>

<head>
  <title>Button Click Shows Context Menu</title>
  <!-- Copyright 1998-2024 by Northwoods Software Corporation. -->
  <meta name="description" content="A button in a Node when clicked shows a context menu for the node." />
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:400px; height:400px"></div>
  <textarea id="mySavedModel" style="width:100%;height:250px"></textarea>

  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
    const $ = go.GraphObject.make; // for conciseness in defining templates

    myDiagram = new go.Diagram("myDiagramDiv",  // create a Diagram for the DIV HTML element
      {
        "undoManager.isEnabled": true,  // enable undo & redo
        "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();
          }
        }
      });

function customCheckBox(dataprop, label) {
  // see definition of buttons in extensions/Buttons.js
  // see extensions/CheckBoxes.html for examples
  return $("CheckBox", dataprop,
    { // a bit bigger than normal
      "Button.width": 16, "Button.height": 16,
      "ButtonBorder.spot1": go.Spot.TopLeft, "ButtonBorder.spot2": go.Spot.BottomRight
    },
    $(go.TextBlock, label))
}

    // define a simple Node template
    myDiagram.nodeTemplate =
      $(go.Node, "Auto",  // the Shape will go around the TextBlock
        $(go.Shape, "RoundedRectangle", { strokeWidth: 0 },
          // Shape.fill is bound to Node.data.color
          new go.Binding("fill", "color")),
        $(go.Panel, "Horizontal",
          $(go.TextBlock,
            { margin: 8 },  // some room around the text
            // TextBlock.text is bound to Node.data.key
            new go.Binding("text", "key")),
          $(go.Shape, "TriangleDown",
            {
              width: 10, height: 6,
              click: (e, button) => {
                const node = button.part;
                e.diagram.commandHandler.showContextMenu(node);
              }
            })
        ),
        { // don't let context click on node bring up context menu
          contextClick: (e, node) => e.handled = true,
          // but there's still a context menu defined so that the above "Button" click
          // event handler can call CommandHandler.showContextMenu
          contextMenu:
            $(go.Adornment, "Spot",
              $(go.Placeholder),
              $(go.Panel, "Vertical",
                new go.Binding("itemArray", "applications"),
                {
                  background: "whitesmoke",
                  alignment: go.Spot.BottomRight,
                  alignmentFocus: go.Spot.TopRight,
                  defaultAlignment: go.Spot.Left,
                  itemTemplate:
                    $("CheckBox", "selected",
                      { margin: new go.Margin(10, 10, 10, 10) },
                      $(go.TextBlock,
                        { margin: new go.Margin(0, 0, 0, 10) },
                        new go.Binding("text", "label"))
                    )
                }
              )
            )
        }
      );

    // but use the default Link template, by not setting Diagram.linkTemplate

    // create the model data that will be represented by Nodes and Links
    myDiagram.model = new go.GraphLinksModel(
      [
        { key: "Alpha", color: "lightblue", applications:
          [
            {
              label: "Application one one",
              selected: false,
            },
            {
              label: "Application two",
              selected: true,
            },
            {
              label: "Application three",
              //selected: true,
            },
          ]
        },
        { key: "Beta", color: "orange", applications:
          [
            {
              label: "Application one one",
              selected: true,
            },
            {
              label: "Application 2",
              selected: true,
            },
          ]
        }
      ],
      [
        { from: "Alpha", to: "Beta" },
      ]);
  </script>
</body>

</html>
7

on clicking any checkbox inside the dropdown , it gets closed.
is there a way to close it only when clicked outside of it ?

Also , instead of context menu , is it possible to open dropdown with some visibility binding?

8

Ah, if you don’t want it to act like a context menu, where a click executes some command and the context menu goes away, you don’t want to use a context menu (i.e. GraphObject.contextMenu and the ContextMenuTool).

OK, just use an Adornment without using any context menu stuff. There’s more to implement that way, but it isn’t too complicated.

<!DOCTYPE html>
<html>

<head>
  <title>Button Click Shows Choices Menu</title>
  <!-- Copyright 1998-2024 by Northwoods Software Corporation. -->
  <meta name="description" content="A button in a Node when clicked shows an Adornment for the node." />
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:400px; height:400px"></div>
  <textarea id="mySavedModel" style="width:100%;height:250px"></textarea>

  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
const $ = go.GraphObject.make; // for conciseness in defining templates

myDiagram = new go.Diagram("myDiagramDiv",  // create a Diagram for the DIV HTML element
  {
    "undoManager.isEnabled": true,  // enable undo & redo
    "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();
      }
    }
  });

const ChoicesMenu =
  $(go.Adornment, "Spot",
    $(go.Placeholder),
    $(go.Panel, "Vertical",
      new go.Binding("itemArray", "applications"),
      {
        background: "whitesmoke",
        alignment: go.Spot.BottomRight,
        alignmentFocus: go.Spot.TopRight,
        defaultAlignment: go.Spot.Left,
        itemTemplate:
          $("CheckBox", "selected",
            {
              margin: new go.Margin(10, 10, 10, 10),
              "ButtonBorder.spot1": go.Spot.TopLeft, "ButtonBorder.spot2": go.Spot.BottomRight
            },
            $(go.TextBlock,
              { margin: new go.Margin(0, 0, 0, 10) },
              new go.Binding("text", "label"))
          )
      }
    )
  );

// define a simple Node template
myDiagram.nodeTemplate =
  $(go.Node, "Auto",  // the Shape will go around the TextBlock
    $(go.Shape, { strokeWidth: 0 },
      // Shape.fill is bound to Node.data.color
      new go.Binding("fill", "color")),
    $(go.Panel, "Horizontal",
      { margin: new go.Margin(8, 0, 8, 8) },  // some room around the text & button
      $(go.TextBlock,
        // TextBlock.text is bound to Node.data.key
        new go.Binding("text", "key")),
      $(go.Shape, "TriangleDown",
        {
          name: "TriangleButton",
          width: 10, height: 6, margin: 4,
          background: "transparent",
          click: (e, shape) => {
            const node = shape.part;
            if (ChoicesMenu.adornedObject && ChoicesMenu.adornedObject !== node) {
              showChoicesList(ChoicesMenu.adornedObject, false);
            }
            showChoicesList(node, ChoicesMenu.adornedObject === null);
          }
        })
    )
  );

// show or hide the choices list for the given node
function showChoicesList(node, show) {
  const shape = node.findObject("TriangleButton");
  if (shape) {
    node.diagram.commit(diag => shape.figure = show ? "TriangleUp" : "TriangleDown",
                        null);  // skipsUndoManager
  }
  if (show) {
    ChoicesMenu.adornedObject = node;
    node.addAdornment("Choices", ChoicesMenu);
  } else {
    node.removeAdornment("Choices");
    ChoicesMenu.adornedObject = null;
  }
}

// but use the default Link template, by not setting Diagram.linkTemplate

// create the model data that will be represented by Nodes and Links
myDiagram.model = new go.GraphLinksModel(
  [
    { key: "Alpha", color: "lightblue", applications:
      [
        {
          label: "Application one one",
          selected: false,
        },
        {
          label: "Application two",
          selected: true,
        },
        {
          label: "Application three",
          //selected: true,
        },
      ]
    },
    { key: "Beta", color: "orange", applications:
      [
        {
          label: "Application 1",
          selected: true,
        },
        {
          label: "Application 2",
          selected: true,
        },
      ]
    }
  ],
  [
    { from: "Alpha", to: "Beta" },
  ]);
  </script>
</body>

</html>
9

Thank you so much for being so responsive. I’ll try this out and let you know