Select a TreeNode without PostBack RSS

• • Reply
  

  Tkanos

  Member

  50 Points

  10 Posts

  Select a TreeNode without PostBack

  Nov 22, 2006 03:32 PM|LINK

  Hi Guy's !!

  I'm using a Treeview, and i want to can select A node without PostBack.

  And  After when i submit My page (clicking in a Button), i want to retrieve the Node selected
  

  I Tried to put  :

  Node.NavigateUrl = "javascript:Void(0)" .

   But After Submit the page, I receive "Null" when i want to know the Node.SelectedNode .

   Do you know how i can Do to have the selectedNode in my code without PostBack ???? 

   
  
  • Moved by alowe on Nov 22, 2006 03:43 PM
• • Reply
  

  pushp_aspnet

  Contributor

  2207 Points

  447 Posts

  Re: Select a TreeNode without PostBack

  Nov 22, 2006 07:05 PM|LINK

  Try this:

  1)Set NavigateUrl = "javascript:void(0);"  for each node in the code behind 

   2)Put below code inside head tag in .aspx
  

  <script type="text/javascript"> 

  window.onload = function(){
  
       var treeview = document.getElementById("<%=Tree1.ClientID %>"); //use your treeview id instead of Tree1
       var treeLinks = treeview.getElementsByTagName("a");
       for(i=0;i<treeLinks.length;i++)
       {
            if(treeLinks[i].firstChild.tagName != "IMG")
            {
              treeLinks[i].onclick =function(){
              TreeView_SelectNode(<%=Tree1.ClientID %>_Data,this,this.id.toString());
              }
            }
        }
  }

  </script>

  Hope this works.

  cheers!!
  

   

  Home Is Where the Wind Blows
  http://pushpontech.blogspot.com
• • Reply
  

  Tkanos

  Member

  50 Points

  10 Posts

  Re: Select a TreeNode without PostBack

  Nov 23, 2006 07:59 AM|LINK

  Yes it works.

  Thanks !!!!!!  :D 

• • Reply
  

  Tkanos

  Member

  50 Points

  10 Posts

  Re: Select a TreeNode without PostBack

  Nov 24, 2006 01:08 PM|LINK

  Yes it works with a Node expanded by the code, with the property  :

  PopulateOnDemand = False.

   
  

   (Node expanded with POSTBACK).

   

  But when I expand my nodes with the property:   

  PopulateOnDemand = True 

   (Node expanded without POSTBACK)

  This javascript code don't works. 

  Can you help me ????[:'(] lol

   How can i do to select a node, expanded without POSTBACK, without POSTBACK.

  Thanks ;) 

   
  
  • Marked as answer by simonmu on Nov 27, 2006 06:40 PM
• • Reply
  

  pushp_aspnet

  Contributor

  2207 Points

  447 Posts

  Re: Select a TreeNode without PostBack

  Nov 24, 2006 01:20 PM|LINK

  Man you want the best of both worlds. Ok, check the last but one post here, it worked for me.

  Hope that helps.

  
  

  Home Is Where the Wind Blows
  http://pushpontech.blogspot.com
• • Reply
  

  Tkanos

  Member

  50 Points

  10 Posts

  Re: Select a TreeNode without PostBack

  Nov 24, 2006 04:45 PM|LINK

  Yes Thanks,

  It's no so dificult :

  I Just put NavigateUrl = "javascript:trv_SelectNode();"

  But i have a little problem, and I don't know Why.

   When i cliked in a node for the first time, (after expand his parentNode.)

  The javascript code don't works, but after the first click the javascript code works.

  I put my JS Code, if you can help me.

   

  <script class=st type=">
  2    
  3     var previousSourceSelectedNode = null;
  4    
  5            window.onload = function()
  6            {
  7                 trv_SelectNode();
  8            }
  9    
  10           function trv_SelectNode()
  11           {
  12               var treeview = document.getElementById("&lt;%=Trv_Campaign.ClientID %>");
  13               var treeLinks = treeview.getElementsByTagName("a");
  14   
  15                for(i=0;i<treeLinks.length;i++)
  16                {
  17                     if (treeLinks[i].firstChild != null)
  18                     {
  19                         if(treeLinks[i].firstChild.tagName != "IMG")
  20                         {
  21                           treeLinks[i].onclick = function()
  22                           {
  23                              trvSource_OnClick(this);
  24                           }
  25                         }
  26                     }
  27                 }
  28   
  29           }
  30   
  31           function trvSource_OnClick(trv)
  32           {
  33               if(previousSourceSelectedNode == null) //Noeud cliqué pour la premiere fois
  34               {
  35                  previousSourceSelectedNode = trv;
  36               }
  37               else  //deselect previous node
  38               {
  39                   previousSourceSelectedNode.className = "nodeNotSelected";
  40                   previousSourceSelectedNode = trv;
  41               }
  42               TreeView_SelectNode(_Data,trv,trv.id.toString());
  43   
  44               trv.className = "nodeSelected";   //met le style a "nodeselected"
  45   
  46           }
  47   
  48           </script>
  
  
        
  
      
  
  
  52        .nodeSelected{text-decoration:none;background-color:#C5C2B8;BorderStyle=Solid;BorderWidth:1px;}
  53        .nodeNotSelected{text-decoration:none;background-color:none;}
  54

    

  <script class=st type="> 
  	 	
  	 	var previousSourceSelectedNode = null; 
  	 	
  
          window.onload = function()
          {
               trv_SelectNode();
          }  
          
          function trv_SelectNode()
          {
              var treeview = document.getElementById("&lt;%=Trv_Campaign.ClientID %>");
               var treeLinks = treeview.getElementsByTagName("a");
  
                
               for(i=0;iif (treeLinks[i].firstChild != null)
                    {
                        if(treeLinks[i].firstChild.tagName != "IMG")
                        {
                          treeLinks[i].onclick = function()
                          {
                             trvSource_OnClick(this);
                          }
                        }
                    }
                }
  
          }
          
          function trvSource_OnClick(trv) 
          {
              if(previousSourceSelectedNode == null) //Noeud cliqué pour la premiere fois
              {
                 previousSourceSelectedNode = trv;
              }
              else  //deselect previous node
              {
                  previousSourceSelectedNode.className = "nodeNotSelected";
                  previousSourceSelectedNode = trv;
              }
              TreeView_SelectNode(<%=Trv_Campaign.ClientID %>_Data,trv,trv.id.toString());
          
              trv.className = "nodeSelected";   //met le style a "nodeselected"
  
          }
           
          
          </script>
  
        
      

   
• • Reply
  

  Tkanos

  Member

  50 Points

  10 Posts

  Re: Select a TreeNode without PostBack

  Nov 27, 2006 01:34 PM|LINK

  I understand,

  the first time i clik i call trv_selectNode, which add for each node  the events onclick = trvSource_OnClick

  And the second time i click, i call the events onclick (trvSource_OnClick).

   So, to correct this problem i must call trv_selectNode just after expand my node.

  But How can i call this javascript function, after  populated my node ????

  Or call this function just after the callback ??????? 

   
  Do you know How????

  It's ridiculous, a problem so simple.
   

  
   

   

   

• • Reply
  

  pushp_aspnet

  Contributor

  2207 Points

  447 Posts

  Re: Select a TreeNode without PostBack

  Nov 28, 2006 05:20 AM|LINK

  Hi Tkanos,

  I don't think you will be able to set the onclick for the dynamically populated nodes if you have populatenodesfromclient = true, as in this case the window onload does not fire. Also I don't think we can know for the treeview as to when the callback is over, that's why i gave the other solution.

  I would reproduce my previous solution and it works fine:

  Page_Load:

  -------------------------------------------------

   if (!IsPostBack)
          {
              int nodeLevel;
              for (nodeLevel = 0; nodeLevel < Tree1.Nodes.Count; nodeLevel++)
              {
                  //Setting NodeLevel for all statically present nodes
                  Tree1.Nodes[nodeLevel].NavigateUrl = "javascript:TreeView_SelectNode(" + Tree1.ClientID + "_Data,this,'" + Tree1.ClientID + "t" + nodeLevel.ToString() + "');";
              }
              Session["nodeLevel"] = nodeLevel.ToString();
          }

  ------------------------------------------------

  TreeNodePopulate:
  

  ------------------------------------------------

   protected void Tree1_TreeNodePopulate(object sender, TreeNodeEventArgs e)
      {
  
          for (int i = 0; i < 5; i++)
          {
              TreeNode t = new TreeNode("Dynamically " + i);
              string nodeLevel = Session["nodeLevel"].ToString();
              t.NavigateUrl = "javascript:TreeView_SelectNode(" + Tree1.ClientID + "_Data,this,'" + Tree1.ClientID + "t" + nodeLevel + "');";
              e.Node.ChildNodes.Add(t);
              int newNodeLevel = Convert.ToInt32(nodeLevel) + 1;
              Session["nodeLevel"] = newNodeLevel.ToString();
          }
      }

  -------------------------------------------------- 

  The script: 

  --------------------------------------------------

  window.onload = function(){
  
       var treeview = document.getElementById("<%=Tree1.ClientID %>");
       var treeLinks = treeview.getElementsByTagName("a");
       for(i=0;i<treeLinks.length;i++)
       {
            if(treeLinks[i].firstChild.tagName != "IMG")
            {
              treeLinks[i].setAttribute("href","javascript:void(0);");
              treeLinks[i].onclick =function(){
              TreeView_SelectNode(<%=Tree1.ClientID %>_Data,this,this.id.toString());
              }
           
            }
        }
  }
  -----------------------------------------------------

  Above i assumed that initially you have only first level nodes with populateondemand=true  for every node.

  Hope this helps!! 

   

  Home Is Where the Wind Blows
  http://pushpontech.blogspot.com