Show/Hide buttons on basis of condition


I have two buttons(expand and collapse), both of which are shown on the basis of a particular condition. Now, i want to modify the behavior like : On click of expand button, expand button should hide and collapse should be displayed and vice-versa. Something like tree expander button which goJs provides.
How can i do that ?


Bind either their “visible” property or their “opacity” property to some property that you have that represents the state the node is in, with opposite conversion functions returning either true/false or 0.0/1.0.

Hi Walter,

I’ve tried the above thing, but it’s not working for me. I have given the snapshots of code below. Tell me if i am doing wrong anywhere.

  1. Expand button :

  2. Collapse button:

You first need to decide whether to control the buttons’ visible or opacity property. Choose one – it does not make sense to bind both of them for your requirements. Your choice of property affects panel layout as a button shows or hides.

Second, the bindings should use the same source property. You’ve done that, although I do not understand why you used two different data properties.

Third, the conversion functions should return opposite values so that one button shows when the other one is hidden.

I am using both because, i have 2 conditions :
First being that the node should have “calledProcessInstanceId” and second one being the hide/show flag of the second button denoted by “collapseOpq”.

Can i get an example wherein i have both the conditions binded to visible property of the button ?


Ah, OK, so you need to depend on more than one data property. Use the empty string as the source property, so that the conversion function gets the data object as its first argument.

Is there an example that can help ?


Binding | GoJS API, but yours should not be a TwoWay Binding.

Also, search the samples.

That helped.
Thanks a lot Walter!