Ctl00 being added only to Telerik controls inside RadWindow

[Massimiliano]

After several hours of debug scratching my head at why some javascript won't work in my user control if it was inside a radwindow (but works flawlessly outside), I discovered that RadWindow seems to prefix Telerik controls ID with "ctl00_".
The big problem is that it only adds it to Telerik controls and not for example to ASP server side controls.
Thus simple tricks like the following to get a control id in an external javascript, derived from the js function initiator won't work anymore:

var id = args.getAttribute('id');
var PasswordMatchID = id.replace('RegPasswordCheck', 'PasswordMatch');

That's because if the initiator (args) is a Telerik control and PasswordMatchID is a server side ASP.NET control, they won't have the same prefix chain as the Telerik one will start with 'ctl00_' while the ASP.NET one won't.

Any hint/fix? And why this behaviour? Why ctl00 is not added to every server side control then?
Thanks in advance

[Marin Bratanov]

Hello Massimiliano,

RadWindow's ContentTemplate is an INamingContainer: http://msdn.microsoft.com/en-us/library/system.web.ui.inamingcontainer.aspx and so it should be expected to change the IDs of controls inside, especially if their ClientIDMode is Auto and not Static.

Also, it is very likely that this prefix comes from the content itself - if it is in another INamingContainer like a master page or user control) and not from the RadWindow.

The following article treats accessing controls in the ContentTemplate, both on the server, and on the client: http://www.telerik.com/help/aspnet-ajax/window-controls-container.html. Apart from server code blocks to get the correct ClientID (that will work only for scripts inline in the aspx page), you can consider using jQuery to find the partial ID in the RadWindow's content template.

Here is a small reusable example that relies on you knowing only the server IDs of the controls. It will also show that RadWindow changes all IDs inside, unless there is explicit configuration that will prevent this (e.g., in the web.config):

<telerik:RadWindow ID="RadWindow1" runat="server">
    <ContentTemplate>
        <asp:TextBox ID="Textbox1" runat="server" />
    </ContentTemplate>
</telerik:RadWindow>
<asp:Button ID="Button1" Text="open RW" OnClientClick="openRw();
    return false;" runat="server" />
<asp:Button ID="Button2" Text="get TB" OnClientClick="getTbValue();
    return false;" runat="server" />
<script type="text/javascript">
    function getTbValue() {
        var wnd = getWnd1();
        if (wnd) {
            var tb = $telerik.$("input[id*='Textbox1']", wnd.get_contentElement());
            alert("textbox value: " + tb.val());
            alert("textbox actual ID: " + tb.attr("id"));
        }
    }

    function openRw() {
        var wnd = getWnd1();
        if (wnd)
            wnd.show();
    }

    function getWnd1() {
        var wndId = $telerik.$("div[id*='RadWindow1']").attr("id").replace("RadWindowWrapper_", "");
        var wnd = $find(wndId);
        return wnd;
    }
</script>

Regards,
Marin Bratanov
Telerik

[Massimiliano]

Thank you for your reply Marin. It's really an odd behaviour I have to admit but I'm using the same user control, out of radwindow (in a NestedViewTemplate of ragrid) and this doesn't happen.
Also what really puzzles me (and that's why I opened this topic here in Telerik forum and not in generic ASP.NET community) is that only Telerik controls are prefixed with ctl00_ while <asp: controls are not.
The structure is this:

' A new page .aspx is opened in RadWindow, it has masterpage so the structure is
<asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" runat="Server">
   <telerik:RadMultiPage runat="server" ID="DetailMultipage" SelectedIndex="0" RenderSelectedPageOnly="false">
        <telerik:RadPageView runat="server" ID="DetailRadPageView1" CssClass="RadGridPageView">
            <myctrl:UserFormEdit runat="server" ID="UserForm1" />

' Inside user control
<div id="MyForm" runat="server" class="RadGridDetailForm">
    <asp:PlaceHolder ID="EditForm" runat="server">

'While in the RadGrid scenario (without radwindow I just have inside the NestedViewTemplate this

<asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" runat="Server">
   <telerik:RadMultiPage runat="server" ID="DetailMultipage" SelectedIndex="0" RenderSelectedPageOnly="false">
        <telerik:RadPageView runat="server" ID="DetailRadPageView1" CssClass="RadGridPageView">
            <myctrl:UserFormEdit runat="server" ID="UserForm1" />

' Inside user control
<div id="MyForm" runat="server" class="RadGridDetailForm">
    <asp:PlaceHolder ID="EditForm" runat="server">

So the only thing that is different is RadWindow and (as you noted) that it opens a master/content page with the user controlo in it, but still this won't explain why only Telerik controls inside the user control are prefixed with ctl00_
I don't use any "static" attribute for IDs just  default yet I have for example:
id="ctl00_MainContent_EvaUserForm1_RegPassword" for a RadTextBox and just a line below that I have id="MainContent_EvaUserForm1_RegPasswordCustomValidator" for a custom validator (both are span elements).
This is just an example the same happens for the other non-Telerik controls as well

[Marin Bratanov]

Hi Massimiliano,

It may seem a bit odd that there is a difference, yet the AutoID mode of ASP should take care of proper IDs. RadWindow merely loads the page in an iframe, so it should not affect the ASP logic in any way, the server does not know that the response it sends is for a frame.

Should you need to use IDs in your scripts I would still advise using server code blocks to get their correct ClientID from ASP. This will let your code automatically accommodate any changes in the page structure that will break if you use hardcoded IDs.

If you need to work with external scripts too, I would suggest starting off from this blog post to see how to transfer such ClientIDs from the aspx page to global objects that you can use everywhere: http://blogs.telerik.com/jefffritz/posts/13-01-21/simplify-javascript-control-references-in-asp.net-webforms.

Another key point are the controls themselves -  our controls implement the INamingContainer interface so that they allow for nesting controls better. "Standard" controls like labels and buttons do not implement this interface. This is where the difference in the generated IDs comes from. You can see this by pressing F12 over the class name of any control and examining what classes it inherits and what interfaces it implements. I am attaching a short video that showcases this. You can also find attached a simple test page that also shows there is no difference between the page when it loads in a RadWindow or directly in the browser.

Regards,
Marin Bratanov
Telerik

[Massimiliano]

Thank you Marin you've been very detailed and helpful and I guess that "Another key point are the controls themselves -  our controls implement the INamingContainer interface so that they allow for nesting controls better. "Standard" controls like labels and buttons do not implement this interface" clear up the point very well.
At the moment I resorted to an ugly .replace('ctl00_','') in the JS replace chain which is awful but it does the trick.