jQuery Selection Inside Window

[Thomas]

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
});

[Marin Bratanov]

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