Rad Controls not validating XHTML standards

[Mick]

Hi everyone,

I am using Rad Controls v 2010.2.713.40 and have come across an issue I cannot seem to fix...I have a radAjaxPanel on a page with a radAjaxLoadingPanel and a RadScript block but when I come to validate the page I get the following error:

   1.   Error  Line 179, Column 29: character "$" is not allowed in the value of attribute "id"
              <div id="ctl07_ctl07$rapPanel">
      It is possible that you violated the naming convention for this attribute. For example, id and name attributes must begin with a letter, not a digit.

Here is a copy of the page that it is compaining about:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="enquiry.ascx.cs" Inherits="Promat.lang.co.uk.enquiry" %>
<telerik:RadAjaxPanel ID="rap" runat="server" Width="100%" OnAjaxRequest="rap_AjaxRequest"
    LoadingPanelID="ralp">
    <div id="enquiryWrapper">
        <div id="detailsDiv">
            <h2>
                Your Details</h2>
            <h3>
                Name:</h3>
            <p>
                <asp:TextBox ID="NameBx" runat="server"></asp:TextBox></p>
            <h3>
                Telephone:</h3>
            <p>
                <asp:TextBox ID="TelBx" runat="server"></asp:TextBox></p>
            <h3>
                Email:</h3>
            <p>
                <asp:TextBox ID="EmailBx" runat="server"></asp:TextBox></p>
        </div>
        <div id="requestDiv">
            <h2>
                Nature of your enquiry</h2>
            <textarea id="EnqTxtBx" cols="40" rows="10"></textarea>
        </div>
        <div id="submitDiv">
            <h2>
                Submit your request</h2>
            <img id="sendBtn" src="../../themes/buttons/SendBtn.png" class="clickable prodbtn"
                alt="Send" title="Submit your Enquiry" onclick="SendEnquiry()" onmouseover="javascript:this.src='../../themes/buttons/sendBtn-on.png'"
                onmouseout="javascript:this.src='./themes/buttons/sendBtn.png'" />
            <img id="cancelBtn" src="../../themes/buttons/CancelBtn.png" class="clickable prodbtn"
                alt="Cancel" title="Cancel" onclick="SlideOut(0,'top','OUT')" onmouseover="javascript:this.src='../../themes/buttons/cancelBtn-on.png'"
                onmouseout="javascript:this.src='../../themes/buttons/cancelBtn.png'" />
            <div id="EnqMessageDiv" runat="server" style="display: none;">
                <img src="../../themes/cross.png" alt="result" runat="server" id="MessageImg" style="width: 16px;
                    height: 16px;" />
                <asp:Label runat="server" ID="MessageLbl"></asp:Label>
            </div>
        </div>
    </div>
    <div id="thankyouWrapper">
        <asp:Label CssClass="brandText3_large" runat="server" ID="thanksLbl">Thankyou for your request, a member of our team will get back to you soon</asp:Label></div>
</telerik:RadAjaxPanel>
<telerik:RadScriptBlock ID="rsb" runat="server">
    <script type="text/javascript">
        function SendEnquiry()
        {
            var oAjax = <%= rap.ClientID %>;
            var txtBx = document.getElementById("EnqTxtBx");
            var EnqTxt = txtBx.value;
            oAjax.ajaxRequest("Enq|"+EnqTxt+"|");
            //slide(0,'top','OUT','1');
        }
    </script>
</telerik:RadScriptBlock>
<telerik:RadAjaxLoadingPanel ID="ralp" Runat="server" Skin="Default" Transparency="50">
</telerik:RadAjaxLoadingPanel>

As you can see, the id I have given it is rap but when the page loads the server side id has a $ inserted into it.  This doesn't happen with the other rad controls on this page nor does it happen in other projects we have to the rad ajax panels?

If you view source on one of our other projects (which has the same page but done on a different version [2009.2.701.35]) you can see it has been rendered like below:
<div id="ctl05_ctl05_RadAjaxPanel1Panel">
    <div id="ctl05_RadAjaxPanel1" style="width:100%;">

On this page I am having an issue with, the server control is rendered like:
<div id="ctl07_ctl07$rapPanel">
    <div id="ctl07_rap" style="width:100%;">

Any help is much appreciated...

Thanks,

M

[Dimo]

Hello Mick,

You seem to be using Predictive ClientIDMode, which is the cause of the problem. If you upgrade to RadControls Q2 2010 SP2 (due this week), the issue will not be observed. Note that the ClientIDMode of RadControls in future versions will be enforced to AutoID, as the other ID modes are not fully supported - we need to have control and predictability of the IDs of our controls' elements in order to support the rich client-side functionality.

Regards,
Dimo
the Telerik team

[zenit1]

Hey
I used ClientIDMode="Predictable"   on RadAjaxPanel ,  but still received the same error. You can see this on following address.
Thanks

[Dimo]

Hi zenit1,

As I said, the Predictable ID mode is the cause of the problem, not the solution. The issue has been addressed in the coming Q2 2010 SP2 release, due by the end of this week.

Best wishes,
Dimo
the Telerik team