addChangedListener

GoJS
#1

Hi Team,

Please read the following message to understand my problem.

I am trying to use the functionality of the topic ‘HTML Interaction’ in my project, the one shown on your site http://www.gojs.net/latest/samples/htmlInteraction.html

What I am trying to do, is to populate the ‘Information’ box with some input text fields on drag of a particular node from palette to the main diagram. I am able to do this.

But in my project that particular node can be drag for more than one time in the main diagram (multiple occurrence) and their information in the ‘Information Box’ input text fields will be different.

So what I want is that, the input text fields should contain information in the text fields for each such kind of node. But unfortunately this is not happening.

Please provide me the solution.

#2

If I understand you correctly, I think you just need to have each kind of node data hold as many property values as you need with the same values for each.

#3

Hi Walter,
There are more than one exactly same node in the main diagram palette which I have dragged from the palette window. Now I want to define attributes for these node in the Information Box. For each node no of attributes is same in Information box but there values may differ.
Thanks

#4

suppose i have two or more similar kind of nodes in the main diagram palette. Now what I want, if I click on one node than I should be able to define its attributes values in Information box. Similarly for other similar nodes as well. After defining there attributes values, if I start selecting those nodes one by one than the attribute values which I had defined should be visible in the Information Box window. How to achieve this feature. Please help.

#5

That is exactly the behavior that you see in the main Diagram.

If you want that behavior in the Palette, because you want users to modify the attributes of items in the palette by setting properties on the node data associated with the nodes in the palette, you will need to establish a “ChangedSelection” DiagramEvent listener on the Palette. This listener should do what the listener is doing on the main Diagram.

The sample actually establishes the wrong listener on the Diagram. It ought to be a “ChangedSelection” DiagramEvent listener, not a ChangedEvent listener as it is currently implemented. Either way happens to work, but ChangedEvents happen for a lot of reasons besides selection changes, so that makes a ChangedEvent listener really inefficient for the sample’s purposes.

To repeat: establish a “ChangedSelection” DiagramEvent listener on whichever Diagram(s) you want users to see and maybe modify properties on the selected node’s data. That includes on a Palette, which is just a subclass of Diagram.

#6

Hi Walter,
If possible, please share a piece of code using ChangedSelection if possible.
Thanks in advance.

#7

Have you searched all of the samples, the extensions, and the introduction?

#8

the attribute values which I am defining in the Information box is getting lost once I select any other node or click anywhere in the main diagram palette. how I will be able to sustain those values which I am defining for a particular node. Any idea on this. Please help

#9

The sample just shows the properties of the selected node.

If you want to leave the HTML fields unchanged as the selection changes, you can do that.

In fact you can also automatically change the data properties of selected nodes, if you like. But I would recommend against that – better to use an “Apply” button for that.

Basically you can do whatever you want in that “ChangedSelection” DiagramEvent listener, except change the selection.

#10

if there is any sample code for applying this ‘Apply button’ to leave the HTML fields unchanged. Please let me know.

#11

Hi Walter,
Any suggestion on this part, HTML fields unchanged on selection changes.
Please suggest.
Thanks

#12

Typically in a “ChangedSelection” DiagramEvent listener, you would only update those HTML fields that you want to. When the user modifies those fields (that are modifiable), I would think you would want to update the corresponding data for the selected node(s).

However, it appears that you are asking about having fields that have values even when there is nothing selected. Presumably some of those fields are modifiable by the user as well. The issue then is what should happen when the user selects a node, and then maybe a few more nodes. Should those selected nodes’ data’s properties be modified automatically as the nodes become selected? That is your choice.

You can certainly do so, but I think this might be disconcerting to some users. I suggest instead that you have some explicit way of applying property values to node data. You could implement an HTML button (which I named “Apply”) that set the selected node data properties according to the HTML field values. Or you could have a separate mode in which those properties would be set as the user selects nodes. Then they have the option of going back to the normal mode to do other things, so that selecting a node to move or copy it won’t unintentionally modify its properties according to those HTML fields.