Ok, How can we achieve both the functionalities. Can you plz share code?
click: function (e: any, node: any) {
nodeClickHandler(node.data.title);
e.diagram.selectCollection(node.findTreeChildrenNodes());
}
To select all nodes on load:
myDiagram.addDiagramListener("InitialLayoutCompleted",
e => e.diagram.selectCollection(e.diagram.nodes)
);
Thanks for your code.
- I have added the click event code but only parent-child relationship is working and not individual node selection. Please help if any changes in code.
- To select all nodes on load is working.
That means nodeClickHandler isn’t working. That is your code, not ours, so we can’t debug it.
Below is the function I am using and just passing the title to the argument s. The updateSelectedModels(s) just passing the selected nodes to the parent component. One difference I see previously I was using “nodeClickHandler(obj.part.data.title)” as obj.part and now you sent as node.data.title. Are we getting the title in node?
function nodeClickHandler(s:any) {
props.updateSelectedModels(s);
}
Sorry, but we still have no idea what your internal code does. Maybe you should just call
e.diagram.select(node);.
I am using React and using ReactDiagram to render the diagram. I am using diagram inside the modal and getting all the selected data, but diagram is not refreshing. I have two buttons in modal called select All and Deselect All for selecting and deselecting nodes and the modal and buttons are in different React component.
All the diagram related code is in another component, so when I click the buttons the diagram is not refreshing. Is there any refresh method to call outside the diagram component?
“Refreshing” is not necessary with the GoJS library, as long as you have updated the diagram or model state correctly via the diagram component.
Are you sure that you are successfully calling those Diagram methods for changing the selection on the correct instance of Diagram?
I am not using any Diagram methods to select. I have used the below code in one of the component. You can see the “sel” property assigned to “isVarSelected” that I have added to the nodeDataArray using the setState.
for (let i = 0; i < textvalue.length; i++) {
let isVarSelected = false;
if (variable.selectedHierarchyModels && variable.selectedHierarchyModels.length > 0) {
isVarSelected = variable.selectedHierarchyModels.indexOf(textvalue[i].value) > -1;
}
let itemData: any = {
“title”: textvalue[i][“value”],
“name”: textvalue[i][“value”],
“parent”: Number(parentId[i][“value”]),
“sel”: isVarSelected
};
updatedNodeArray.push(itemData,)
}
this.setState({ nodeDataArray: updatedNodeArray, variableName: labelOrName }, () => {
this.refreshNodeIndex(this.state.nodeDataArray);
});
In the diagram component I have used the below code.
new go.Binding(“isSelected”, “sel”).makeTwoWay(),
Don’t know what is the issue.
Have you ensured all the objects in updatedNodeDataArray have the expected values for “sel”? Are you sure your state is being updated properly? You can check this with the React dev tools.
Regarding saving the selection state, instead of a two-way binding, you should use a “ChangedSelection” event listener to update your state. Selection changes don’t trigger the model change listener.
Here’s an example based on gojs-react-basic where node data includes a “sel” property that gets updated when the diagram selection changes. There’s also a list of selected nodes under the diagram just for demonstration purposes. You’ll have to add back your custom selection logic if you want it.
As you have mentioned above, I have checked the updatedNodeDataArray and all the data getting properly as below mentioned. But still I am not getting the selection when I click the select all button. Please help me to fix this issue. Let me know if you need more details.
I’ve added a “Select All” button to the CodeSandbox sample linked above. It’s just a button that calls diagram.selectCollection(diagram.nodes).
Thanks a lot for your code and I have added functionality for select all and deselect all. So now only one functionality is pending like below cases.
- When I click on parent node, both the parent and related child nodes has to be selected.
- If there is an individual child then I should be able to select individual nodes as well.
Below is the code I am using but only childs are selected when click on parent and I cannot select multiple parents as well.
function nodeClickHandler(s:any) {
props.updateSelectedModels(s);
}
{
click: function (e: any, node: any) {
nodeClickHandler(node.data.title);
e.diagram.selectCollection(node.findTreeChildrenNodes());
},
}
Do you mean when the user shift-clicks in order to add to the selection?
If so, you will need to check the InputEvent.shift property and decide whether to call Diagram.selectCollection, which establishes the complete selection, or to individually set Part.isSelected, which lets you select some Nodes or Links and not others.
The same might be needed if you want to respect the InputEvent.control (or meta?) modifier.
In previous chat Jhardy mentioned both the functionalities can be handled in a single click event and he shared the code. So just wondering if it can be done.
click: function (e: any, node: any) {
nodeClickHandler(node.data.title);
e.diagram.selectCollection(node.findTreeChildrenNodes());
}
I still don’t know exactly what you want to do, but yes it can be done. You just need to iterate through the Nodes and Links and decide for each one the value of Part.isSelected.
Any example or if you update the same in codesandbox as Jhardy updated. It will be useful.
You could use a click function like this.
click: (e, node) => {
const set = new go.Set();
set.add(node).addAll(node.findTreeChildrenNodes());
e.diagram.selectCollection(set);
}
