Adding a parent node to Tree Model

I am using the Incremental tree example. However my requimement is that i need to add either a child or parent based on the tree expander button click. I have created 2 tree expander buttons, the button that helps me to add children works well and model and the digram gets updated. However adding the parent does not work.

here is what i did.

a. Added the new parent object to the model
b. set the existing parent node’s parent key value to the newly added node’s key.

My approach might be totally wrong. Can anyone please help on this issue?.

thanks

That sounds basically right. I assume you are using a “Button”, not a “TreeExpanderButton”.

What’s your button’s definition?

thanks for your reply. i did made that work. but i now i face a different issue.

this is code i used to add the parent

nodeData = my new node date
myDiagram.model.addNodeData(nodeData);
var selected = diagram.model.findNodeDataForKey(data.key); // current selected node
diagram.model.setParentKeyForNodeData(selected, (data.ORDNO_I));

now i see 2 nodes in the browser, however the tree is not repainted.the arrow link between the 2 nodes, is not present and also the parent does not appear above the child.

i am sure this is a very basic issue, i am using go.js for the first time

Take a look at the function in the http://gojs.net/latest/samples/stateChart.html sample that is called by a button click to create a new node and create a new link connecting with that new node. Of course you’ll probably want to create the link from the new parent node to the button’s node, rather than the other direction as the State Chart sample does.

One difference: that button is in a selection Adornment rather than being in the Node itself.

Something is not correct. I am using the incremental tree example. The model adds the children properly , however it does not work when i use the above logic to add a parent. please see the modified on Click code

function createSubTree(selectedData) {
var $ = go.GraphObject.make;
var child1 = myDiagram.findNodeForData(selectedData);
var parentData = {
key: 3,
parent: “”,
color: go.Brush.randomColor()
};
// add to model.nodeDataArray and create a Node

        myDiagram.model.addNodeData(parentData);
        // create a link data from the old node data to the new node data
        var linkdata = {
            from: 0, //myDiagram.model.getKeyForNodeData(childdata),  // or just: fromData.id
            to: 3,//myDiagram.model.getKeyForNodeData(parent1),
            text: "transition"
        };

        // and add the link data to the model
        myDiagram.model.addLinkData(linkdata);

    }

I am getting a javascript error that addLinkData is not a function of model

That sample uses a TreeModel, not a GraphLinksModel as you are assuming. Read about the differences at http://gojs.net/latest/intro/usingModels.html.

If you want to use a TreeModel, you’ll need to set the parent property to be the key of the parent node.

I too want to use a tree model and use the incremental tree example. Adding children to the model works perfect. Now i added a new button which will help me to add a parent to the node 0.

When i see the parentnodekey for node 0, it does not work…

OK, here are the changes you can make to the Incremental Tree sample – let’s call it Incremental Parent.

First, I’ll add a “Button” to the node template:

        ),
        // add a parent
        $("Button",
          { alignment: go.Spot.TopLeft, click: addParent },
          $(go.TextBlock, "P"),
          new go.Binding("visible", "parent", function(k) { return k === undefined; })
        ),
        // the expand/collapse button, at the top-right corner

I have positioned the new button to be at the top-left of the node, but of course you can position it any way you like. You can also customize the appearance to be whatever you like, instead of a dead-simple “P”.

Note also that there is a data Binding on the button’s GraphObject.visible property, so that the button becomes invisible if there is a parent key on the node data.

The behavior of the button (i.e. its GraphObject.click event handler) is defined by the addParent function:

  function addParent(e, button) {
    var diagram = button.diagram;
    var model = diagram.model;
    var node = button.part;
    // don't add parent if it already exists
    if (model.getParentKeyForNodeData(node.data) === undefined) {
      model.startTransaction("add parent node");
      // add parent node by adding new data object to model
      var parentdata = {
        key: model.nodeDataArray.length,  // this is optional
        //everExpanded: true,  // not to automatically createSubTree on first expansion
        color: go.Brush.randomColor()  // add whatever properties you need for each node
      };
      model.addNodeData(parentdata);
      // initialize parent Node
      var parentnode = diagram.findNodeForData(parentdata);
      parentnode.isTreeExpanded = true;  // must be expanded, since child is already present
      parentnode.location = node.location;  // locate the new parent node close to this node
      // create link between new parent node and this node
      model.setParentKeyForNodeData(node.data, model.getKeyForNodeData(parentdata));
      model.commitTransaction("add parent node");
    }
  }

Note that specifying the key property on each new node data object is not required, either here or in the createSubTree function. The model will automatically assign a unique key to each new node data. In case you do not assign the key yourself, the code to create a link between the nodes, TreeModel.setParentKeyForNodeData, uses the Model.getKeyForNodeData method to get the key for the new node data object after it has been added to the model.

Specific to this sample, the everExpanded property on the data can be either true or false, depending on whether you want to allow users to create new child nodes for the new parent node.

Thanks . This worked.