Forums

I have an application using DNNTree that needs to manipulate the tree and I am currently using postbacks to do this but, I would really like to use callbacks, of course this would mean I would have to modify the treeview either during the callback or on the client.  there are a few situations where updating the treeview become important:

1. The user modifies some information that needs to be reflected in the treeview.  A description lets say.
2. The user adds an entry that then needs to be added to the treeview.
3. The user deletes an entry that must be deleted from the treeview.

I know the PopulateOnDemand event does this so I am thinking it must be possible but I am not sure how.

I have played with this for a little while and I am getting duplicate nodes in the treeview.

I tried it two different ways: (Either one is alot better than a postback)
1.  Passing the xml of the child nodes for a given parent. (This would entail clearing the parents children and repopulating)
2.  Passing just the parentID, clearing the children for the parent and then issuing a callback to populate the children.

Here is my js function, you can see from the commented lines both of the techniques and some other attempts, hopefully I did'nt butcher it too bad.

Thanks for your help.

function AddTrvNode(strTrvClientID, strParentID, nXml)
{ 
   varoTree = dnn.controls.controls[strTrvClientID]; //obtain ref to dnntree 
   var oNode = oTree.DOM.findNode('n', 'id', strParentID); //find DNNNode
   if (oNode != null) 
   { 
      var oTNode = new dnn.controls.DNNTreeNode(oNode); //cast it to DNNTreeNode 
      if (oTNode.expanded) { //The node is already expanded so we need to get rid of the current nodes 
         oTree.collapseNode(oTNode); 
         for (var i = 0; i < oTNode.node.childNodeCount(); i++) 
            oTNode.node.removeChild(oTNode.node.childNodes(i)); 

      //var oCtr = oTree.getChildControl(oTNode.id, 'pctr'); //obtain ref to parent 
      //oTree.renderNode(oTNode.node, oCtr, true); //render new xml 
      //oTNode.node = null; 
         oTNode.hasPendingNodes = true; 
      //oTNode.hasNodes = false; 
         oTNode.update(); 
      } 

      oTree.selectNode(oTNode); 
      // oTNode.node.appendXml(nXml); 
      // var oCtr = oTree.getChildControl(oTNode.id, 'pctr'); //obtain ref to parent 

      // oTree.renderNode(oTNode.node, oCtr, true); //render new xml 
      // oTree.update(); //update tree's xml so postback will persist 
      // oCtr = oTree.getChildControl(oTNode.id, 'pctr'); //obtain ref again, since it is now re-rendered (last obj ref now invalid/old) 

      //oTree.expandNode(new dnn.controls.DNNTreeNode(oTNode.node)); //expand new node 
   } 
   else alert('Parent node not found: ' + strParentID);
}

Yes it would be but, I was'nt sure how to do it but, your message got me thinking that I was rendering the parent node when I should be rendering the Child so...this it was I came up with and it works.

So the user adds a new value to the database. This will properly add a new child to a parent that is expanded or it will force an unexpanded parent to expand and get its children via callback (Which will also include the new value the user added).  The only thing I have to figure out is how to select the new child after a callback.

I have also included a routine I came up with that changes a nodes text.  If you have any feedback on how to make these better I would appreciate it.

function CHAS_AddTrvNode(strTrvClientID, strParentID, strNewNodeID, nXml)
{ 
   //alert(strTrvClientID + ' , ' + strParentID + ' , ' + strNewNodeID + ' , ' + nXml);
   var oTree = dnn.controls.controls[strTrvClientID]; //obtain ref to dnntree 

   var oPNode = oTree.DOM.findNode('n', 'id', strParentID); //find the parent DNNNode
   if (oPNode != null)
   {
      var oTPNode = new dnn.controls.DNNTreeNode(oPNode); //cast it to DNNTreeNode
      if (!oTPNode.expanded) 
      {
         oTree.expandNode(oTPNode);
       } else {
         oTree.selTreeNode.selected = null; //Clear the selected node
         oTree.assignCss(oTree.selTreeNode);
         oTPNode.node.appendXml(nXml);

         var oCNode = oTree.DOM.findNode('n', 'id', strNewNodeID); //find Child DNNNode
         var oCTNode = new dnn.controls.DNNTreeNode(oCNode);
         var oCtr = oTree.getChildControl(oTPNode.id, 'pctr'); //obtain ref to parent

         oTree.renderNode(oCTNode.node, oCtr, false); //render new Child Node xml

         oTree.update(); //update tree's xml so postback will persist
      }
   } else {
     alert('Parent node not found: ' + strParentID);
   }
 }

function CHAS_UpTNodeDesc(strTrvClientID, strNodeID, strNodeDesc)
{
   var oTree = dnn.controls.controls[strTrvClientID]; //obtain ref to dnntree
   var oNode = oTree.DOM.findNode('n', 'id', strNodeID); //find DNNNode
   var oTNode = new dnn.controls.DNNTreeNode(oNode); //cast it to DNNTreeNode
   var oCtr = oTree.getChildControl(oTNode.id, 't'); //obtain ref the span with the text
   oCtr.innerHTML = strNodeDesc;

   oTNode.text = strNodeDesc;

   oTree.update(); //update tree's xml so postback will persist
}