Hello,
Does it support persistent TreeExpanderButton state?
When I quit the application after using collapse/expand, the next time I open it again, I hope to keep the last usage status.
Add a TwoWay Binding on the Node.isTreeExpanded property in your node template.
Hi @walter,
When I collapse a node that contains multiple levels of child nodes. How many nodes should I save data? I saved the node that was operated on. But it not expected.
It should be:
The order in which the nodes are expanded does matter.
How are you saving that state, which is actually the Node.isTreeExpanded property? If you are saving it using a TwoWay Binding, then when the user collapses a node all of the descendent nodes are collapsed and their states are saved too.
Here’s what I assumed. When the user collapses the root node, you can see how all of the node data get new values for data.isTreeExpanded. So it only seems right that you save all of the modified model data.
<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2020 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<script id="code">
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
layout: $(go.TreeLayout),
"undoManager.isEnabled": true,
"ModelChanged": function(e) { // just for demonstration purposes,
if (e.isTransactionFinished) { // show the model data in the page's TextArea
document.getElementById("mySavedModel").textContent = e.model.toJson();
}
}
});
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape,
{ fill: "white" },
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 12 },
new go.Binding("text")),
$("TreeExpanderButton", { alignment: go.Spot.TopRight }),
new go.Binding("isTreeExpanded").makeTwoWay()
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", color: "lightblue" },
{ key: 2, text: "Beta", color: "orange" },
{ key: 3, text: "Gamma", color: "lightgreen" },
{ key: 4, text: "Delta", color: "pink" }
],
[
{ from: 1, to: 2 },
{ from: 1, to: 3 },
{ from: 3, to: 4 }
]);
}
</script>
</head>
<body onload="init()">
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
<textarea id="mySavedModel" style="width:100%;height:250px"></textarea>
</body>
</html>
As you said, I’m using Node.isTreeExpanded with TwoWay Binding.
When I expand root node, How to save nodes of above situation?
You could set Node.isTreeExpanded to false in the template, so that all nodes start off collapsed.
Hi @walter ,
I tried using Node.isTreeExpanded via TwoWay. But has problems, Could you give me a example code like this:
And collapse “Greating” will be:
PS: “Sale” is collapsed.
Thanks you!
Here’s what I just tried. I copied the samples/IVRTtree.html sample, and I modified the node template by adding the TwoWay Binding on Node.isTreeExpanded property:
myDiagram.nodeTemplate = // the default node template
$(go.Node, "Vertical",
new go.Binding("isTreeExpanded").makeTwoWay(),
. . .
Then I opened that page and manually collapsed some nodes.
var str = myDiagram.model.toJson() saves the state of the diagram by saving its model.
myDiagram.model = go.Model.fromJson(str) then loads that saved model.
The new diagram has exactly the same expanded and collapsed node states as the old diagram had when I saved the model.
That would make sense if your model node data had isTreeExpanded: false set on them.
So is it impossible to achieve what i want?
How does that follow from what I said?
I have tried storing isTreeExpanded to the model, and also tried not storing to the model, but I still can’t achieve this requirement (Does it support persistent TreeExpanderButton state? - #7 by plusor ?U = plusor)
Every attempt to expand “Greeting” is as follows:
Yes, that is the default behavior, just as in any tree-view component. What do you want to happen instead?
When I collapsed “Sales” and “Greeting” after exiting the page and re-enter the page expand “Greeting”, “Parts and Services” and “Representative” should not be collapsed.
It should be:
I have made a copy of the IVR Tree sample at Page Not Found -- Northwoods Software, so that you and I can try the same code. The only substantive change I made was to add these two lines to the node template:
new go.Binding("isTreeExpanded").makeTwoWay(),
new go.Binding("wasTreeExpanded").makeTwoWay(),
For purposes of experimentation, I added “load” and “save” functions along with HTML buttons to call those functions, and I added a <textarea> to show the saved model in JSON format, to edit that text if desired, and then to load the model as a new diagram. And I removed the gojs.net samples framework code, to avoid the clutter.
So you can collapse and expand what you want and hit the “Save” button. When you then do a “Load”, you should get the same state of collapsed or expanded nodes. They might appear at different points in the viewport, but that is independent of the collapsed/expanded states.
It’s work. Thanks!