Control Reference From .js file

[Chris Zavaleta]

I'm using the client side api for my rad ajax controls and as everyone know, you get a handle on the control from javascript like this:

var 

 

tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

This works great when the javascript is inline with my html markup. However, in trying to be organized, I put my javascript in an external .js file and am then referencing the .js file from the html.  This way I don't have my html and javascript together but as seperate  files.

This is fine and of course standard practice, but, when my script is in a .js file, a call like this doesn't work:

var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

Is this just a limitation or does someone know the trick for me to have a page's javascript in a .js file but at the same time be able to reference a radcontrol on the page.

 

 

 

 

 

[Paul]

Hi Chris,

In order to achieve your goal you should not use server code like <%= RadGrid1.ClientID %>. Here's a sample code snippet that shows the needed approach.

ASPX:

<form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Path="~/JScript.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <telerik:RadPanelBar ID="RadPanelbar1" runat="server">
    </telerik:RadPanelBar>
    <input id="Button1" type="button" value="button" onclick="test()" />
    </form>

JScript.js

function test() {
    var panel = $find("RadPanelbar1");
    alert(panel);
}

All the best,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Chris Zavaleta]

Paul,
Great answer and thanks, however still not working.  Let me clarify a bit, the telerik control is in a usercontrol.  So, as you know, only one page can contain the RadScriptManager. So, the parent page has the RadScriptManager on it and I'm referencing my .js file.  The user control which contains the rad combo box is being hosted by my parent page.

So, my main page is hosting the RadScriptManager and it is in that control that I'm referencing my javascript file like so:

<

 

telerik:RadScriptManager runat="server" ID="ScriptMgr">

 

 

<Services>

 

 

<asp:ServiceReference Path="~/Services/SecuritySvcMgr.svc" />

 

 

<asp:ServiceReference Path="~/Services/ContactSvcMgr.svc" />

 

 

</Services>

 

 

<Scripts>

 

 

<asp:ScriptReference Path="~/UIObjects/Scripts/Security/Security.js" />

 

 

</Scripts>

 

 

</telerik:RadScriptManager>

and the rad combo box (the control i'm trying to read) is in a user control that is being hosted on the parent page. With this design, I'm still getting a null reference on my combo box.

for the technique you described above, does it make a difference if the parent page has the .js file and the telerik control is on a user control?

 

[Chris Zavaleta]

Paul,
OK, after viewing page source, apparently this is what is happening.  The telerik control id is being appended with the id of the user control it in.

user control id = "ui_security"
telerik control id = "ui_Roles_ddlb"
rendered id = "ui_security_ui_Roles_ddlb"

So, once I saw that and then referenced the "rendered id" in my javascript, the code worked fine. So, is this just the way telerik renders out ids that are in user controls?

Thanks,
Chris

[Paul]

Hi Chris,

Please refer to this blog post for details on the matter.

Greetings,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.