Get TextBox ClientID in Javascript

[Anthony]

Hi,

I plan to use a treeview with Checkbox enabled and put a textbox with each node. When checkbox checked, the textbox will be visible, otherwise textbox will be hidden. This will be done in javascript for set textbox.style.display and textbox.style.visibility.

I have no problem to setup treeview with textboxes, but my question is how can I get textbox in client side javascript. I try to use node.findControl, but I can't get correct textbox clientid. When first create treeview in server side, I use following code. 

RadTreeNode n = new RadTreeNode();

        TextBox textBox = new TextBox();

        Label label = new Label();

        n.Controls.Add(label);

        n.Controls.Add(textBox);

        n.Attributes.Add("TextBoxID",textBox.ClientID);

in javascript 

function OnClientNodeCheckedEventHandler(sender, eventArgs)

    {

        var node = eventArgs.get_node()

if(node.get_checked())

{

var txtID = node.get_attributes().getAttribute("TextBoxID");

var textbox = node.findControl(txtID);

            if (textbox!=null)

            {

                textbox.style.display="block";

                textbox.style.visibility="visible";

            }

}

    }

but the problem is that textbox always return null. Can someone help me out?

I realy appreciate it.

[Shinu]

Hi Anthony,

Checkout the article which explains about how to access the controls inside the treeview templete. I hope this will help you.
Accessing Controls Inside Templates

Thanks,
Shinu.

[Nicolaï]

Hmm, same problem here...
It returns "null" whenever I try findControl in javascript...

var tree=$find("<%= myTree.ClientID %>");
var node=tree.findNodeByValue(myvalue);
var a=node.findControl("abc");
alert(a); <<<< null
return false;

[Nikolay Tsenkov]

Hello Nicolai,

I have just checked this out and it works fine for me.
I tested my code with the specified version and it successfully gets reference to controls inside the template.
Here is the markup of the TreeView:

<telerik:RadTreeView runat="server" ID="RadTreeView1" OnClientLoad="onLoad">
    <Nodes>
        <telerik:RadTreeNode Text="Node">
            <NodeTemplate>
                <telerik:RadTextBox runat="server" ID="textBox" Text="FoundMe!" />
            </NodeTemplate>
        </telerik:RadTreeNode>
    </Nodes>
</telerik:RadTreeView>

Here is the java script:

function onLoad(sender) {
    var tree=sender;
    var node=tree.get_nodes().getNode(0);
    var textBox=node.findControl("textBox");
    alert(textBox.GetTextBoxValue());
}

Hope this is going to help you in resolving what the problem really is!


Regards,
Nikolay Tsenkov
the Telerik team

[Nicolaï]

Hello & thanks,

The problem was solved in a support ticket.
My conclusion was that the documentation ommited to mention that findControl only works with other radcontrols (and not standard controls).
(..And I spent a LOT of time trying to findControl on a regular textbox)

So I switched the textbox (standard) into a radtextbox, as you did, and it works again..!

Best regards,
Nicolaï

[Nikolay Tsenkov]

Hello Nicolai,

The standard asp:TextBox doesn't have a client object. That's why our method, doesn't retrieve a reference to it - it simply doesn't exist.

Glad that I could help you!


Regards,
Nikolay Tsenkov
the Telerik team

[Jon]

Hi Nikolay,

What would the work around for this be if you have a label being used (rather than a radtextbox)?  I went looking for RadLabel but then remembered that it is only in WinForms not AJAX. 

Regards,

Jon

[Jon]

OK figured out the work around in case anyone has the same issue in the future.

var uxIssuedByLabel = document.getElementById('uxRadTreeView_i' + currentNode.get_index() + '_uxIssuedBy')

where currentNode is the current node in the tree. 

Cheers,

Jon

[Tomasz M.Lipiński]

Hi,

OK, but this works for the first level of nodes. Each level adds its own "_i<n>" element to the id.

If you need the value of only one control of the template you can put this value at the server side to the <node>.Text attribute and then - retrieve it using the <node>.get_text() method.

Regards
Tomasz