How to get the selected ItemTemplate data of the panel inside a node

Hi Team,

I have been using gojs for quite some time now and I do create a complex structure using gojs diagram with nodes but recently I have come across an issue that I don’t know how to solve it.

I have a node, which contains multiple panels in it and one of the panel uses itemArray and ItemTemplate to generate multiple nested panels inside it.

now all of this is working as expected, but when I click on the individual item template panel, I expect that the values or data passed to these individual itemTemlplate panels can be captured in **ChangedSelection** event handler.

But the subject and the selection returned from the event inside **ChangedSelection** event handler points to me at the root level node and not at the child itemTemplate so can someone please help here ? @walter

here is the screenshot and the arrow is pointing at the inner box, which is generated from itemTemplate,
Screenshot 2022-09-29 at 4.54.57 PM

Yes, the Diagram.selection collection is a collection of Parts, not a collection of GraphObjects. In other words, isSelected is a property on the Part class, not on Panel or GraphObject.

Perhaps you would prefer using a click event handler on the Panel that is the itemTemplate? See for example how in the Selectable Fields sample, Mapping Selectable Fields of Records , the notion of each “field”, i.e. an item panel, has a colored background showing that it is “selected”, independently of the Node being selected. Look at the fieldTemplate and the onFieldClick function and the helper functions isFieldSelected and setFieldSelected.

thanks @walter , this solution works for me :)

@walter ,is there a way to unselect everything when I click elsewhere on the canvas?

I mean since we set the background manually, is there a way to unselect them when clicked outside in the example you shared earlier ?

If you look at the findAllSelectedItems function in the Selectable Fields sample, you can see how it iterates over all of the nodes and, for each node, over all of the elements corresponding to fields.

Instead of collecting those fields that are selected, you can modify them to be not “selected” by calling setFieldSelected on each one.

1 Like

thanks @walter , that solution worked :)