How do I know if a CheckBox is checked or unchecked?

GoJS
#1

I know that you can use go.GraphObject.make to create a ‘CheckBox’ and usually people do ‘_doClick’ call to execute some code. But if there is a way of getting the status of the current check box so that _doClick can do different logics?

${
    'CheckBox', 'check1', {
        '_doClick': (e, obj) => {
            if (this check box is checked?) {}
            else {}
        }
    }
}

So my problem is how to determine the current state of the checkbox as the if logic in the code. Is that possible that ‘_doClick’ could be changed to ‘checked’ and ‘unchecked’ so that makes the developers more easier?

#2

Just look at the value of, in your case, data.check1. The first argument to the “CheckBox” constructor is the data property name that it’s bound to. For example, if all I add to my node template is:

    $("CheckBox", "check1", $(go.TextBlock, "check1"))

and I click on the checkbox labeled “check1”, you will see that the value of myNode.data.check1 changes in the model, the first time set to true.

And it’s automatically undoable too!

You can see the examples at https://gojs.net/latest/extensions/Checkboxes.html and read the implementation at https://gojs.net/latest/extensions/Buttons.js.

So if you really want to perform some additional side-effects when the user clicks a CheckBox, you could declare something like:

        {
          _doClick: (e, obj) => {
              alert(obj.part.data.check1)
          }
        }
#3

Thank you @walter It works!

#4

Hi @walter, is _doClick the only customizable function? Is there other function, like _doCheck or _doUncheck?

#5

No – why would you need those when you can do what you want with _doClick?

#6

Hi Walter,
I have an editable slider using the Graduated Panel and a Checkbox.
I want to use the value of chekbox to toggle the slider’s edit mode.

          "_doClick": function(e, obj) {
              // obj.part.movable = !obj.part.movable;  // To make the element movable. This works.
              // Here I'm trying to toggle the editable data.
              obj.part.data.editable = !obj.part.data.editable;
            }

How does it work with doClick ?
Should I use go.Binding instead ?

#7

If you just want to modify some state in the model, you’ll want to call model methods to do so, and you want to do so within a transaction.

  _doClick: function(e, button) {
    var node = button.part;
    node.diagram.model.commit(function(m) {
      m.set(node.data, "editable", !node.data.editable);
    }, "toggled editable");
  }

And you might have some Bindings that use “editable” as the source property.

#8

Awesome, thanks man.