Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeDNN Open Source...DNN Open Source...Provider and Extension ForumsProvider and Extension ForumsClientAPIClientAPIManipulating TreeNodes on the ClientManipulating TreeNodes on the Client
Previous
 
Next
New Post
8/8/2006 12:01 PM
 

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.

 

 
New Post
8/9/2006 9:23 AM
 

It is definitely possible.  All you need to understand is that the dnntree control (like most dnn controls) uses Xml to both render itself, and persist itself between postbacks.  This code snippet should get you started.

function addNode()

{

       var oTree = dnn.controls.controls['MyDNNTree']; //obtain ref to dnntree

       var sNodeText = 'bin';     //hardcode node for now (better to use ID here)

       var oNode = oTree.DOM.findNode('n', 'txt', sNodeText); //find DNNNode - really should be using ID!

       if (oNode != null)

       {

              var oTNode = new dnn.controls.DNNTreeNode(oNode); //cast it to DNNTreeNode

             

              //for a full list of xml attributes see the dnn.js file DNNNode object declaration

              //and then combine that with the DNNTreeNode definition found in the dnn.controls.dnntree.js file (since it inherits from DNNNode)

              var sXml = '<n id="SomeUniqueId" txt="Added Node" key="SomeUniqueId" imgIdx="1" ca="' + dnn.controls.action.expand + '" />';

              oTNode.node.appendXml(sXml);

 

              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('node not found: ' + sNodeText);

}

 

 

 


 
New Post
8/24/2006 11:27 AM
 

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)

   var
oTree = 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);
}

 
New Post
8/25/2006 11:24 AM
 
This may be oversimplifying things too much, but why are you attempting to add nodes that already exist?  Wouldn't it be easier to simply not add a node if it exists already instead of clearing it out and re-adding?

 
New Post
8/25/2006 3:35 PM
 

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
}

 
Previous
 
Next
HomeHomeDNN Open Source...DNN Open Source...Provider and Extension ForumsProvider and Extension ForumsClientAPIClientAPIManipulating TreeNodes on the ClientManipulating TreeNodes on the Client


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out