jQuery Selection Inside Window

2 posts, 0 answers
  1. Thomas
    Thomas avatar
    2 posts
    Member since:
    Mar 2014

    Posted 14 Apr Link to this post

    I cannot seem to use jQuery to select a CheckBoxList inside a RadWindow ContentTemplate.Clicking on the checkboxes does nothing, but if I move the CheckBoxList out of the RadWindow it works fine. I've probably tried a dozen selectors, none work.

    <telerik:RadWindow ID="MonthsWindow" runat="server" Skin="Metro" AutoSize="true" MinWidth="575px" MaxWidth="700px" MaxHeight="600px" KeepInScreenBounds="true" Left="100" Top="100" VisibleOnPageLoad="false" Behaviors="Close, Move" RenderMode="auto" DestroyOnClose="true" EnableAjaxSkinRendering="true" ShowContentDuringLoad="true">
    <ContentTemplate>
    <asp:CheckBoxList ID="CheckBoxList1" runat="Server">
         <asp:ListItem Text="Red" Value="red"></asp:ListItem>
         <asp:ListItem Text="Blue" Value="blue"></asp:ListItem>
         <asp:ListItem Text="Green" Value="green"></asp:ListItem>
    </asp:CheckBoxList>
                                         
    </ContentTemplate>
    </telerik:RadWindow>

    $("[id*='CheckBoxList1']").click(function () {
        //code
    });
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 18 Apr Link to this post

    Hi Thomas,

    Here is an example that works for me:

    <asp:ScriptManager ID="Scriptmanager1" runat="server" />
    <telerik:RadWindow ID="MonthsWindow" runat="server" Skin="Metro" AutoSize="true" MinWidth="575px" MaxWidth="700px" MaxHeight="600px" KeepInScreenBounds="true" Left="100" Top="100" VisibleOnPageLoad="false" Behaviors="Close, Move" RenderMode="auto" DestroyOnClose="true" EnableAjaxSkinRendering="true" ShowContentDuringLoad="true">
        <ContentTemplate>
            <asp:CheckBoxList ID="CheckBoxList1" runat="Server">
                <asp:ListItem Text="Red" Value="red"></asp:ListItem>
                <asp:ListItem Text="Blue" Value="blue"></asp:ListItem>
                <asp:ListItem Text="Green" Value="green"></asp:ListItem>
            </asp:CheckBoxList>
             
        </ContentTemplate>
    </telerik:RadWindow>
    Notes:
    DestroyOnClose=true will not have effect for dialogs with ContentTemplate
    ShowContentDuringLoad will not have effect for dialogs with ContentTemplate
    I advise you remove Min/Max dimensions when using AutoSize
     
    <asp:Button ID="Button1" Text="open dialog" OnClientClick="openWnd();return false;" runat="server" />
    <script>
        var $ = $telerik.$;
         
        //Sys.Application.add_load(function () {//consider using the Sys.Application.Load event to ensure scripts are loaded so jQuery is there
        $("[id*='CheckBoxList1']").click(function () {
            //code
            alert(1);
        })
        //});
     
        function openWnd() {
            $find("<%=MonthsWindow.ClientID%>").show();
        }
    </script>

    I advise you inspect the rendered HTML to see what the final IDs of the elements in the RadWindow are, because its ContentTemplate is an INamingContainer and thus ids of server controls inside are changed by the framework when rendering the HTML. Alternatively, you can consider using a custom HTML attribute or a CSS class for your selector.

    Regards,

    Marin Bratanov
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top