Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > TreeView > Can't find checkbox inside the radtreeview nodetemplate

• Raymond

  Posted on Jan 26, 2012 (permalink)

  Hi,
  I have a dynamic created treeview, each node contains several kinds of user controls. My problem is I can find the "radtextbox" user
  control, but I can't find the "checkbox" user control using clientside javascript.

  class GrandChildNodeTemplate :ITemplate
  { ...
  public void InstantiateIn(Control container)
  {

  cb.ID = "cb";
  cb.Visible = false;
  cb.DataBinding += new EventHandler(checkBox_DataBinding);
  container.Controls.Add(cb);
  
  rtb.ID = "rtb";
  rtb.Visible = false;
  rtb.DataBinding += new EventHandler(radTextBox_DataBinding);
  container.Controls.Add(rtb);
  }
  }
  
  page_load
  protected void populate(RadTreeNode eNode)
  {
  GrandChildNodeTemplate grandChildTemplate = new GrandChildNodeTemplate();
  RadTreeNode node = new RadTreeNode("gcn");
  eNode.Nodes.Add(node);
  grandChildTemplate.InstantiateIn(node);
  
  ....
  cb = (CheckBox)node.FindControl("cb");
  cb.Visible = true;
  node.Value = thisGuid;
  cb.Attributes.Add("onClick", "return findNode('" + thisGuid+ "')");
  }
  
  code for clientside
  
  JS += "function findNode(args) { ";
  JS += " var tv = $find('"+ rtvReportComponents.ClientID + "'); ";
  JS += " var node = tv.findNodeByValue(args);";
  JS += " var rtb = node.findControl(\"rtb\"); ";
  JS += " if (rtb==null) alert('hello');";
  JS += " var cb = node.findControl(\"cb\"); ";
  JS += " if (cb==null) alert(args);"; // <--- problem is here. cb==null, can't find checkbox
  JS += " if (!cb.checked){";
  JS += " rtb.disable();}";
  JS += " else{";
  JS += " rtb.enable();}";
  JS += " }";
  
  ScriptManager.RegisterClientScriptBlock(this, GetType(), "Condition Info", JS, true);
  
  My suspicion is node.findcontrol method can't find the DOM element? Thanks

  Reply

• Princy MVP

  Posted on Jan 26, 2012 (permalink)

  Hello,
  
  You can directly use the "document.getElementById()" method to access the checkbox,since you are getting the corresponding ClientID in the client event handler. Here is the sample code.
  
  JS:
  

  function clientChecked(id, nodeID)

      {

          var tree = $find("<%= RadTreeView1.ClientID %>");

          var node = tree.findNodeByValue(nodeID);

          var chkBox = document.getElementById(id); //accessing CheckBox

     }

  
  
  Thanks,
  Princy.

  Reply


• Raymond

  Posted on Jan 27, 2012 (permalink)

  thanks for the reply.
  
  getElementByID() won't work in this case because let's say the tree structure like following:
  
  parentNode1    
      childNode1  - contains checkbox1
      childNode2 - contains checkbox2
  parentNode2
      childNode3 - contains checkbox3
      childNode4 - contains checkbox4
      childNode5 - contains checkbox5
  
  now, childNode1.ClientID and childNode3.ClientID  both are i0, it is the same. ChildNode2.ClientID  and ChildNode4.ClientID are i1. That is why I assign a guid to a node.value and use findNodeByValue. It is the same thing for the checkbox or any controls inside the node.  checkbox1.ClientId and checkbox3.ClientId are the same, it is i0. clientId is readonly, we can't assign a value by ourselves, can we?
  

  Reply

• Bozhidar Bozhidar

  Posted on Jan 30, 2012 (permalink)

  Hello Raymond,
  
  The problem in your code is that the findControl() method returns a javascript object. Since RadTextBox has a client object, the function works as expected. The CheckBox element however doesn't have a client object, so the function returns null. What you need to do is get a reference to the DOM element of the checkbox. And to find one that resides only in the selected node, you can use the following jQuery:
  

  var checkbox = $telerik.$('>div [id$="CheckBox1"]', node.get_element()).get(0)

  
  Here I get the first checkbox element inside the node, which ID ends with CheckBox1. This selector searches for checkboxes only inside the node, pointed by the "node" object. Please note that there is a space between div and [id$="CheckBox1"].
   
  Regards,
  Bozhidar
  the Telerik team

  If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > TreeView > Can't find checkbox inside the radtreeview nodetemplate