Can't find checkbox inside the radtreeview nodetemplate

[Raymond]

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

[Princy]

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.

[Raymond]

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?

[Bozhidar]

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