This sample demonstrates the synchronization of two different models, necessitated by their being different types: TreeModel for the tree view and GraphLinksModel for the general diagram on the right. Normally in such situations one would have a single model with two diagrams showing the shared model. However in this case there are two separate models but the model data, including the Model.nodeDataArray, are shared. That means the "group" property is used in the normal fashion in the GraphLinksModel but is used as the "parent" reference in the TreeModel.

That introduces some complications when there are changes to the data, since they need to be reflected in other other model even though the data properties have already been changed! This is accomplished by having a Model Changed listener on each model that explicitly updates the other model.

{ "class": "go.GraphLinksModel", "nodeDataArray": [ {"key":1, "text":"Main 1", "isGroup":true, "category":"OfGroups"}, {"key":2, "text":"Main 2", "isGroup":true, "category":"OfGroups"}, {"key":3, "text":"Group A", "isGroup":true, "category":"OfNodes", "group":1}, {"key":4, "text":"Group B", "isGroup":true, "category":"OfNodes", "group":1}, {"key":5, "text":"Group C", "isGroup":true, "category":"OfNodes", "group":2}, {"key":6, "text":"Group D", "isGroup":true, "category":"OfNodes", "group":2}, {"key":7, "text":"Group E", "isGroup":true, "category":"OfNodes", "group":6}, {"text":"first A", "group":3, "key":-7}, {"text":"second A", "group":3, "key":-8}, {"text":"first B", "group":4, "key":-9}, {"text":"second B", "group":4, "key":-10}, {"text":"third B", "group":4, "key":-11}, {"text":"first C", "group":5, "key":-12}, {"text":"second C", "group":5, "key":-13}, {"text":"first D", "group":6, "key":-14}, {"text":"first E", "group":7, "key":-15} ], "linkDataArray": [ ]}