ajax errors with ClientIDMode="Static"

8 posts, 0 answers
  1. Margo Noreen
    Margo Noreen avatar
    36 posts
    Member since:
    Mar 2010

    Posted 30 Sep 2020 Link to this post

    I was working on a simple test page and decided to load the latest Telerik DLLs (2020.3.915) for my asp.net webforms website.  I added a RadWizard to the page, all was working fine until I updated the page directive to set the ClientIDMode to Static. 

     

    Using the devtools in Chrome, it shows the following error coming from ScriptResource.axd 

    "Uncaught RangeError: Maximum call stack size exceeded"

     

    I also noticed in the rendered HTML markup that the RadWizard did NOT use a static id.  In VS, the control was given an id of "wizardMain", but in the rendered HTML, I got the asp.net mangled version instead:

    <div id="ctl00_ContentPlaceHolder1_wizardMain" class="RadWizard RadWizard_Default rwzHorizontal">

    ...

     

     

    In general, the whole wizard markup was kind of messed up.  Take the ClientIDMode out of the page directive and it goes back to rendering and working as expected (so far).

     

    Version loaded into project via nuget:

      <package id="Telerik.UI.for.AspNet.Ajax.Net45" version="2020.3.915" targetFramework="net48" />

  2. Vessy
    Admin
    Vessy avatar
    2334 posts

    Posted 01 Oct 2020 Link to this post

    Hi Margo,

    The faced behavior is expected as our controls do not support Static IDs. It is recommended by Microsoft to use ClientIDMode set to Static only for static controls. The controls from the UI for ASP.NET AJAX suite on the other hand are controls with complex hierarchies of child controls and templates so setting their ClientIDMode property to Static  breaks their functionality. Therefore our controls require the ClientIDMode = "AutoID" to be used.

    You can read more details on this matter here:
    https://docs.telerik.com/devtools/aspnet-ajax/general-information/troubleshooting/general-troubleshooting#setting-clientidmode-property-to-static-breaks-the-telerik-controls-functionality

     

    Regards,
    Vessy
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  3. Margo Noreen
    Margo Noreen avatar
    36 posts
    Member since:
    Mar 2010

    Posted 01 Oct 2020 in reply to Vessy Link to this post

    Thank you for the reply.  FWIW...

    On the page directive, I have ClientIDMode = "Static" but on the rad control (in this, the RadWizard), I explicitly added ClientIDMode = "AutoID".  The control still does not work/render correctly when viewed in the browser.  I have to take out the ClientIDMode attribute in the page directive altogether (at which point, adding that attribute to the rad control is no longer needed).

  4. Vessy
    Admin
    Vessy avatar
    2334 posts

    Posted 01 Oct 2020 Link to this post

    Hi Margo,

    Can you, please, share the whole setup of the problematic page so I can try to replicate the problem and see what is causing it?

    Regards,
    Vessy
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  5. Margo Noreen
    Margo Noreen avatar
    36 posts
    Member since:
    Mar 2010

    Posted 01 Oct 2020 in reply to Vessy Link to this post

    I've attached a screen grab of the .aspx test page that shows the ClientIDMode set in the page directive and on the RadWizard control.  It really couldn't be much more simplistic...  Obviously, this page is a content page, so there is a masterpage, but the only thing of interest there is the scriptmanager.

    As I said, if remove the ClientIDMode attribute from the page directive and view the page in the browser, the RadWizard renders/works correctly.  If I add it back in then view the page, the RadWizard control no longer renders/works correctly.

  6. Vessy
    Admin
    Vessy avatar
    2334 posts

    Posted 06 Oct 2020 Link to this post

    Hi Margo,

    Thanks a lot for the provided snippet. The ID mode set to the page directive is applicable to each identifiable server-side element on the page, meaning that the WizardSteps (which also can have their own IDs) are also affected. This means, that you will need to change the also each RadWizardStep's ClientIDMode to "Auto" in order to overwrite the Stating setting in the page directive:

    <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs"
        Inherits="_Default" ClientIDMode="Static" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    
        <telerik:RadWizard ID="wizardMain" runat="server" RenderMode="Lightweight" DisplayProgressBar="false" ClientIDMode="AutoID">
            <WizardSteps>
                <telerik:RadWizardStep Title="Step 1" StepType="Start" ClientIDMode="AutoID">
                    First step
                </telerik:RadWizardStep>
                <telerik:RadWizardStep Title="Step 2" ClientIDMode="AutoID">
                    Second step
                </telerik:RadWizardStep>
                <telerik:RadWizardStep Title="Completed" StepType="Complete" ClientIDMode="AutoID">
                    Complete step
                </telerik:RadWizardStep>
            </WizardSteps>
        </telerik:RadWizard>
    </asp:Content>
    

     

    In addition, it will be really appreciated if you paste any code snippets as code as well (instead of pictures), so we can copy and test them directly. Thank you in advance for your cooperation.

    Regards,
    Vessy
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  7. Margo Noreen
    Margo Noreen avatar
    36 posts
    Member since:
    Mar 2010

    Posted 08 Oct 2020 in reply to Vessy Link to this post

    Thank you for the workaround.  

    As you'll notice in your example, the RadWizardStep's are really just child elements of the RadWizard control.  You don't even mark them with

    runat="server"

     

    attribute.  Probably more importantly, there's not "ID" at all to be setting... because it is a child element.  They can't be used on their own, outside of a RadWizard control. It seems like the child elements should properly inherit from their parent.   I would suggest that would be a needed "fix."  As mentioned, I can use the workaround, but it doesn't seem quite right.

    My .02.

  8. Vessy
    Admin
    Vessy avatar
    2334 posts

    Posted 13 Oct 2020 Link to this post

    Hi,

    Thank you for the shared feedback, Margo! I will pass your suggestion to you developers and they will check the possibility of such inheritance (depending on the control's architecture).

    Regards,
    Vessy
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top