Built-in combobox inside gojs node

GoJS
1

Hi,

Is it possible to set for TextBlock behaviour when it’s editable from start. Like on this example
Text Editing Examples ?
But combobox should appear after diagram is loaded. Or maybe there is another way to build-in combobox inside gojs node ?

Thanks.

2

There’s currently no way to build HTML (like a combobox/drop-down) into a GoJS node, but you can create a Panel with shapes that stylistically resembles one.

For instance, we do that with checkboxes here: CheckBoxes

3

Yes, you can implement this yourself by adapting that sample code.

In the next version we plan to provide extensions to TextBlock and TextEditingTool to cover situations like what you ask for.

4

Well, I implemented needed behaviour according to and it’s OK for me.

The one thing is unclear for me - how to handle selection in combobox ?
I need handler with node key and new value which is selected in combobox.
In this function, I need to update something on the server side.
Any ideas how to implement it ?

Thanks a lot.
Alex.

5

Can you rephrase as a list of steps? Like

  1. User clicks node to start TextEditing (the combo-box appears)
  2. A certain value gets set in the combo-box
  3. A user picks a new value in the combo-box

Are you talking about #2 or #3?

In the example, #3 is committed when the user clicks away, but you could also add:

customEditor.addEventListener('change', function(e) {
 // do something on each select box change
 // maybe use:
 var textblock = myDiagram.toolManager.textEditingTool.textBlock;
 var node = textblock.part;
 var data = node.data;
}, false);

I wrote that by hand so there may be typos.

6

It works for me! Thanks a lot!

7

Well, I faced with issue that I don’t know how to get current value from combobox. Is there way to do that ?

8

And there is some error
c.select is not a function
which occurs everytime when I set edit mode and combobox appers.
Why this happens ?

Thanks.
Alex.

9

I’m not sure what you mean by c.select is not a function. Can you show me the error you’re seeing? Maybe reproduce it in a codepen?

You can fork and modify: http://codepen.io/simonsarris/pen/DzIwK

10

Hmm… I write my code here

there is no error as was before.
Unfortunately, I can’t get selected value in combobox. In my code,I’m trying to show alert with this value.
How can I do it ?

Thanks a lot for helping.
Alex.

11

Did you not save your codepen? That’s the same link that I sent you.

12

sorry, here is saved link

13

There are JavaScript errors in your code, such as:

 Uncaught ReferenceError: diagram is not defined

Otherwise the code seems to work, so long as data.text exists the alert box won’t show undefined, it will show the data value.

I added “text” to the node data of the sample and fixed the JS error:

14

OK, but it’s not value selected in combobox - “One” or “Two”, how to handle selection in combobox ?

15

Or it’s not possible to handle selected value in custom editor for node ?
I just need to know if it’s possible, could you let me know ?