Rawindow controls inside its contenttemplate

3 posts, 0 answers
  1. Jean-Marc
    Jean-Marc avatar
    93 posts
    Member since:
    Mar 2011

    Posted 30 Nov 2012 Link to this post

    Hi everyone,
    I have a problem in accessing controls inside the contenttemplate area of a radwindow using javascript:
    My application opens a radwindow with a text and an animated gif when pressing a button on the main page and performing a postback event.
    After some seconds the postback is performed and the radwindow is closed.
    If the server for some reasons does not answer the call and the postback event is not performed, after a determined period of time the radwindow changes is content: the text should be subsituted by an other text and the animated gif should be no more visible and also a button should appear.

    My problem is that after the determined time (fixed by me) I cannot change controls parameters by client-side (javascript): I' m not able to access using API che contenttemplate of the radwindow and its controls.

    Here is my code:
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" EnableSkinTransparency="True" RegisterWithScriptManager="True" BackgroundPosition="Center" EnableAjaxSkinRendering="True" HorizontalAlign="Center" BorderStyle="NotSet" Skin="Transparent" EnableViewState="True" EnableEmbeddedBaseStylesheet="True" EnableEmbeddedSkins="True" EnableEmbeddedScripts="True" IsSticky="False" SkinID="Transparent" MinDisplayTime="1000" CssClass="RadAjaxLoadingPanel1">
             
        </telerik:RadAjaxLoadingPanel>
     
    <asp:PlaceHolder ID="PlaceHolderGrid" runat="server">
        <asp:HiddenField ID="HiddenField1" runat="server" />
                <table cellpadding="6" cellspacing="0" style=" width:100%; background-color: #FFFFFF; " >
               
                        <tr>
     
                               
     
                             <td valign="top" style=" padding-top:10px; border-style: solid; border-bottom-color: #e4dfdf; border-width: 0px 0px 1.5px 0px;">
                                  
                                <qsf:CommandBar runat="server" ID="CommandBar1" />
               
                            </td>
                        </tr>
                        <tr>
                        <td>
                        <table>
                        <tr>
                        <td>
                        <asp:DropDownList ID="SelectCampi" runat="server">
                                         <asp:ListItem Text="In processo" Value="In processo"></asp:ListItem>
                                        <asp:ListItem Text="Spediti" Value="Spediti"></asp:ListItem>
                                        <asp:ListItem Text="Tutti" Value="Tutti"></asp:ListItem>
                        </asp:DropDownList>
                        </td>
                        <td>
                                       <asp:Button ID="ButtonEseguiFiltro" runat="server" Text="Esegui Ricerca" CssClass="input" />
                                       </td>
                        <td>
                         
                        </td>
                        <td>
                            <input id="Button1" type="button" value="Refresh" onclick="Refresh()" class="input" />
                        </td>
                        </tr>
                        </table>
                        </td>
                        </tr>
     
                        <tr>
                        <td width="100%">
                        <table style="width: 100%">
                        <tr>
                        <td>
                        <table>
                        <tr>
                        <td>
                        <asp:ImageButton ID="ButtonSend" runat="server" Text="Play" OnClick = "ButtonSend_onClick" OnClientClick="Popup();" ImageUrl="~/Admin/images/Imager_Grid_Play.png" />
                        </td>
                        <td style="white-space: nowrap; width: 75px;">
                        <asp:LinkButton runat="server" ID="LinkSend" Font-Size="X-Large" ForeColor="#00CC00" OnClick = "ButtonSend_onClick" OnClientClick="Popup();">Invia</asp:LinkButton>
                        </td>
                        <td>
                              
                        </td>
                        <td>
                        <asp:ImageButton ID="ButtonStop" runat="server" Text="Stop" OnClick = "ButtonStop_onClick" OnClientClick="Popup();" ImageUrl="~/Admin/images/Imager_Grid_Stop.png" /> 
                        </td>
                        <td style="white-space: nowrap; width: 75px;">
                        <asp:LinkButton runat="server" ID="LinkStop" Font-Size="X-Large" ForeColor="#CC3300" OnClick = "ButtonStop_onClick" OnClientClick="Popup();">Sospendi</asp:LinkButton>
                        </td>
                        <td>
                          
                        </td>
                        <td>
                        <asp:ImageButton ID="ButtonCancella" runat="server" Text="Cancella" OnClick = "ButtonCancella_onClick" OnClientClick="Popup();" ImageUrl="~/Admin/images/Imager_Grid_Cancel.png" />
                        </td>
                        <td style="white-space: nowrap; width: 75px;">
                        <asp:LinkButton runat="server" ID="LinkCancella" Font-Size="X-Large" ForeColor="#CC3300" OnClick = "ButtonCancella_onClick" OnClientClick="Popup();">Rimuovi</asp:LinkButton>
                        </td>
                        <td>
                          
                        </td>
                        </tr>
                        </table>
                        </td>
                        <td align="right" width="100%">
                        <table width="100%" align="right">
                        <tr>
                        <td align="right" width="100%">
                        <table align="right">
                        <tr>
                        <td align="right">
                        <asp:Image ID="Image" runat="server" ImageUrl="~/Admin/images/Imager_Grid_NoConnect.png" ImageAlign="Right" />
                        </td>
                        <td align="right">
                        <asp:Label runat="server" ID="LabelConn" Text="Server Disconnesso" Font-Size="Large" ForeColor="#CC3300"></asp:Label>
                        </td>
                        </tr>
                        </table>
                        </td>                                      
                        
                        </tr>
                        </table>
                        </td>
                        </tr>
                        </table>
                        </td>
                        </tr>
            
            
                         <tr>
                            <td width="100%">
                                <table cellpadding="8" cellspacing="0"style=" width:100%; " >
                                    
                                   
                                    <tr>
                                        <td style=" width:100%" >
                                                                         
                                                <asp:Label ID="LabelSelCat" runat="server"  Visible="true" Text="" />              
                                                <asp:Label ID="LabelIDMailing" runat="server" Text="-1" Visible="true" />                                  
                                                                                                     
                                                    <telerik:radgrid    ID="RadGridMailing"                                                                    
                                                                        runat="server"
                                                                        GridLines="Vertical"
                                                                        AllowPaging="true"
                                                                        AllowFilteringByColumn="False"
                                                                        AutoGenerateColumns="False" 
                                                                        onItemCommand="RadGridMailing_ItemCommand"
                                                                        PageSize="15" ItemStyle-Wrap="True" AlternatingItemStyle-Wrap="True" MasterTableView-ViewStateMode="Inherit" CssClass="RadGrid_Test" MasterTableView-BorderStyle="None" BorderStyle="None" EnableEmbeddedBaseStylesheet="True" EnableEmbeddedSkins="False">
                                                                         
                                                         <ItemStyle Wrap="False" />
                                                         <AlternatingItemStyle Wrap="True" />
                                                                         
                                                                         
                                                         <PagerStyle    Mode="NumericPages"
                                                                        FirstPageText="Prima"
                                                                        FirstPageToolTip="Prima"
                                                                        LastPageText="Ultima"
                                                                        LastPageToolTip="Ultima"
                                                                        NextPagesToolTip="Successiva"
                                                                        NextPageToolTip="Successiva"
                                                                        PagerTextFormat="Cambia Pagina: {4} &nbsp;Pagina <strong>{0}</strong> di <strong>{1}</strong>"
                                                                        PrevPagesToolTip="Precedente"
                                                                        PrevPageToolTip="Precedente" 
                                                                        />
                                                                                                                     
                                                        <MasterTableView    NoMasterRecordsText="Nessuna Mailing presente"
                                                                            GridLines="None"
                                                                            AllowPaging="true"
                                                                            AllowFilteringByColumn="False"
                                                                            ClientDataKeyNames="IDMailing"
                                                                            TableLayout="Fixed"                                                                                                                                               
                                                                            EditFormSettings-EditFormType="AutoGenerated" ViewStateMode="Inherit" AllowAutomaticUpdates="False" ItemStyle-Wrap="True">
                                                            <Columns>
                                                                <telerik:GridClientSelectColumn HeaderStyle-Width="30px"
                                                                                                UniqueName="CheckboxSelectColumn"
                                                                                                FooterText="CheckBoxSelect footer" 
                                                                                                visible="false"
                                                                                                ItemStyle-Wrap="True">
                                                                    <HeaderStyle Width="30px" />
                                                                </telerik:GridClientSelectColumn>
     
     
     
                                                                <telerik:GridTemplateColumn Resizable="False" HeaderStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" ItemStyle-HorizontalAlign="Center" ItemStyle-Wrap="True">
     
                                                                    <HeaderTemplate>
                                                                        <asp:CheckBox ID="headerChkbox" AutoPostBack="True" OnCheckedChanged="RadGridMailing_HeaderCheckChanged" runat="server">
                                                                        </asp:CheckBox>
                                                                    </HeaderTemplate>
     
                                                                    <ItemTemplate>
                                                                        <asp:CheckBox ID="CheckBoxSet" runat="server">
                                                                        </asp:CheckBox>
                                                                    </ItemTemplate>                                                              
                                                                    <HeaderStyle Width="50px" />
                                                                </telerik:GridTemplateColumn>                                                        
     
                                                                <telerik:GridTemplateColumn ItemStyle-VerticalAlign="Middle" ItemStyle-HorizontalAlign="Center" ItemStyle-Wrap="False" HeaderStyle-HorizontalAlign="Center" Resizable ="False">
     
                                                                    <HeaderTemplate>
                                                                        <asp:Label ID="LabelDoc" runat="server" Text="Doc"></asp:Label>
                                                                    </HeaderTemplate>
     
                                                                    <ItemTemplate>
                                                                        <asp:ImageButton ID="image1" runat="server" ImageUrl="~/Admin/images/documento_comune_256x256.png" Width="25" ImageAlign="Middle" Height="25" OnClick="image1_onClick"/>
                                                                    </ItemTemplate>                                                               
                                                                    <HeaderStyle Width="50px" />
                                                                </telerik:GridTemplateColumn>
     
                                                                <telerik:GridBoundColumn DataField="IDMailing" HeaderText="ID" Resizable="False" ItemStyle-Wrap="True" ItemStyle-VerticalAlign="Middle" ItemStyle-HorizontalAlign="Center" MaxLength="25" HeaderStyle-HorizontalAlign="Center">                                           
                                                                    <HeaderStyle Width="50px" />
                                                                </telerik:GridBoundColumn>
     
                                                                <telerik:GridTemplateColumn DataField="MailingName" ItemStyle-VerticalAlign="Top" ItemStyle-HorizontalAlign="Center" ItemStyle-Wrap="True" HeaderStyle-HorizontalAlign="Center">
     
                                                                    <HeaderTemplate>
                                                                        <asp:Label ID="LabelName" runat="server" Text="Titolo"></asp:Label>
                                                                    </HeaderTemplate>
     
                                                                    <ItemTemplate>
                                                                    <asp:Label ID="TextBox1" runat="server" Text ='<%# Eval("MailingName", "{0}")%>' Width="100%">
                                                                    </asp:Label>
                                                                    </ItemTemplate>
                                                                    <HeaderStyle/>
                                                                </telerik:GridTemplateColumn>
     
     
                                                                <telerik:GridTemplateColumn DataField="Subject" ItemStyle-VerticalAlign="Top" ItemStyle-HorizontalAlign="Center" ItemStyle-Wrap="True" HeaderStyle-HorizontalAlign="Center">
     
                                                                    <HeaderTemplate>
                                                                        <asp:Label ID="LabelOggetto" runat="server" Text="Oggetto"></asp:Label>
                                                                    </HeaderTemplate>
     
                                                                    <ItemTemplate>
                                                                    <asp:Label ID="TextBox2" runat="server" Text ='<%# Eval("Subject", "{0}")%>' Width="100%">
                                                                    </asp:Label>
                                                                    </ItemTemplate>
                                                                    <HeaderStyle />
                                                                </telerik:GridTemplateColumn>
     
                                                                <telerik:GridTemplateColumn ItemStyle-VerticalAlign="Top" ItemStyle-HorizontalAlign="Left" ItemStyle-Wrap="True" HeaderStyle-HorizontalAlign="Center" Resizable ="False">                                           
                                                                    <HeaderTemplate>
                                                                        <asp:Label ID="Data" runat="server" Text="Data"></asp:Label>
                                                                    </HeaderTemplate>
                                                                    <ItemTemplate>
                                                                        <asp:Label ID="DataLabel" runat="server" Text=""></asp:Label>
                                                                    </ItemTemplate>
                                                                    <HeaderStyle Width="110px"/>
                                                                </telerik:GridTemplateColumn>
     
                                                                <telerik:GridTemplateColumn Resizable="False" ItemStyle-VerticalAlign="Top" ItemStyle-HorizontalAlign="Left" ItemStyle-Wrap="False" HeaderStyle-HorizontalAlign="Center">
                                                                <HeaderTemplate>
                                                                        <asp:Label ID="DescrizioneStatoLabel" runat="server" Text="Stato"></asp:Label>
                                                                    </HeaderTemplate>
                                                                    <ItemTemplate>
                                                                        <asp:Label ID="DescrizioneStato" runat="server" Text=""></asp:Label>
                                                                    </ItemTemplate>
                                                                    <HeaderStyle Width="140px"/>
                                                                </telerik:GridTemplateColumn>
     
                                                                <telerik:GridBoundColumn DataField="IDMailingServer" HeaderText="IDMailingServer" Display="False" ItemStyle-VerticalAlign="Middle" ItemStyle-HorizontalAlign="Left" ItemStyle-Wrap="True" HeaderStyle-HorizontalAlign="Center" Resizable="False">                                          
                                                                    <HeaderStyle Width="35px" />
                                                                </telerik:GridBoundColumn>
     
                                                                <telerik:GridBoundColumn DataField="MailingState" HeaderText="MailingState" Display="False" ItemStyle-VerticalAlign="Top" ItemStyle-HorizontalAlign="Left" ItemStyle-Wrap="True" HeaderStyle-HorizontalAlign="Center" Resizable="False">                                           
                                                                    <HeaderStyle Width="35px" />
                                                                </telerik:GridBoundColumn>
     
                                                                <telerik:GridBoundColumn DataField="ServerMailingState" HeaderText="ServerMailingState" Display="False" ItemStyle-VerticalAlign="Top" ItemStyle-HorizontalAlign="Left" ItemStyle-Wrap="True" HeaderStyle-HorizontalAlign="Center" Resizable="False">                                           
                                                                    <HeaderStyle Width="35px" />
                                                                </telerik:GridBoundColumn>
     
                                                                  <telerik:GridBoundColumn DataField="CategoryPath" HeaderText="Categoria" Display="false" ItemStyle-VerticalAlign="Top" ItemStyle-HorizontalAlign="Left" ItemStyle-Wrap="True" Resizable="False">                                           
                                                                    <HeaderStyle Width="150px" />
                                                                </telerik:GridBoundColumn>                                                          
     
                                                                <telerik:GridBoundColumn HeaderText="Email in errore" DataField="LabelEmailError" Display = "false" ItemStyle-VerticalAlign="Top" ItemStyle-HorizontalAlign="Left" ItemStyle-Wrap="True" HeaderStyle-HorizontalAlign="Center" Resizable="False">                     
                                                                    <HeaderStyle Width="35px" />
                                                                </telerik:GridBoundColumn>
     
                                                                <telerik:GridTemplateColumn ItemStyle-VerticalAlign="Top" ItemStyle-HorizontalAlign="Left" ItemStyle-Wrap="False" HeaderStyle-HorizontalAlign="Center" Resizable="True">
     
                                                                    <HeaderTemplate>
                                                                        <asp:Label ID="LabelProgressHeader" runat="server" Text="Progressione"></asp:Label>
                                                                    </HeaderTemplate>
     
                                                                    <ItemTemplate>
                                                                         
                                                                        <div runat="server" id="progress_barValue">
                                                                        <asp:Label runat="server" style="display:block;" id="PValue" Text="In Connessione">
                                                                        </asp:Label>
                                                                        </div>
                                                                        <div runat="server" id="progress_bar" class="ui-progress-bar ui-container" style="display: none">                                                                       
                                                                            <div runat="server" id="PBar" class="ui-progress" style="width:0; ">                                                                           
                                                                            </div><!-- .ui-progress -->
     
                                                                        </div><!-- #progress_bar --> 
     
                                                                    </ItemTemplate>                                                               
                                                                    <HeaderStyle Width = "230px"/>
                                                                </telerik:GridTemplateColumn>                                                                                                                   
     
                                                            </Columns>
                                                                                                                
                                                        </MasterTableView>
                                                         
                                                         
                                                          <ClientSettings enablePostBackOnRowClick="False" Resizing-ResizeGridOnColumnResize="False" EnableRowHoverStyle="False" ClientEvents-OnRowSelected="RowSelected" Selecting-AllowRowSelect="False">
                                                            <ClientEvents OnRowMouseOver="OnRowMouseOver" />
                                                             
                                                            <Selecting AllowRowSelect="True" />
                                                        </ClientSettings>
                                                         
                                                    </telerik:radgrid
                                                                                                          
                                        </td>
                                    </tr>
     
                                    <tr>
                                        <td>
                                            <asp:Label ID="lbl_msg" runat="server" Font-Bold="False" ForeColor="#993333"/>
                                        </td>
                                    </tr>
                                   
                                       
                                  </table>
                                 
                            
                                 
                            </td>
                        </tr>
                         
                   
                         
     
                       
                    </table>
     
       <%-- <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="ButtonClick(); return false" />
                <div id="qui">
                    Arriva...
                </div>--%>
     
        <!-- attenzione per funzionare l'ascx aperto nel tooltip deve avere un bind sul PRERENDER-->
        <telerik:RadToolTipManager runat="server" ID="RadToolTipManager1" AnimationDuration="200" ShowDelay="100"
                                    EnableShadow="true" HideDelay="1" Width="550px" Height="110px"
                                    RelativeTo="Mouse" Animation="Slide" Position="BottomRight" OnAjaxUpdate="OnAjaxUpdate"
                                    Skin="Telerik" />
     
    </asp:PlaceHolder>
     
     
     
     
    <telerik:RadWindow runat="server"
                        Width="300px"
                        Height="100px"
                        VisibleStatusbar="false"
                        ID="AddWindow"
                        Modal="true"
                        KeepInScreenBounds="true"
                        Behaviors="None"
                        Skin="Vista"
                        ReloadOnShow="True" VisibleTitlebar="False" DestroyOnClose="True">
    </telerik:RadWindow>
     
    <telerik:RadWindow runat="server"
                        Width="250"
                        Height="125"
                        VisibleStatusbar="false"
                        ID="PopWindow"
                        Modal="true"
                        KeepInScreenBounds="true"
                        OnClientClose="closeRadWindow"
                        Behaviors="Default"
                        Skin="Vista"
                        ReloadOnShow="True" VisibleTitlebar="False" DestroyOnClose="True" VisibleOnPageLoad="False" ShowContentDuringLoad="True">
                        <ContentTemplate>
                        <div style="vertical-align: middle">
        <table align="center">
         
        <tr>
        <td align="center">
        <asp:Image ID="ImageWait" runat="server" ImageAlign="Middle"
                ImageUrl="~/Admin/images/ajax-loader.gif" />
        </td>
        <td>
            <div id = "Div1" style="display: none" align="center">
            No Service connection
            </div>
        </td>
        </tr>
        <tr>
        <td>
        <asp:Label ID="LabelConnecting" runat="server" Text="Connecting...."
                Font-Size="X-Large"></asp:Label>
        </td>
        <td align="center">
            <input id="Button2" type="button" value="Close"  onclick="Close()" style="display: none"/>
        </td>
        </tr>
     
        </table>
        </div>
        </ContentTemplate>
    </telerik:RadWindow>

    And the javascript I use to open and to change the radwindow content is:

    var timeoutPopPeriod = 100000; //in milliseconds
    function Popup() {
            var wnd = $find("<%=PopWindow.ClientID%>");
            wnd.show();
            setTimeout(function () { reset2() }, timeoutPopPeriod);
        };
     
    function reset2() {
            var wnd = $find("<%=PopWindow.ClientID%>")
            var content = wnd.get_contentFrame();
            var image = content.$find("<%=ImageWait.ClientID %>");
            var label = content.$find("<%=LabelConnecting.ClientID %>");
             
            var labelconn = content.contentWindow.getElementById("Div1");
            var button1 = content.contentWindow.getElementById("Button1");
            image.style.display = "none";
            label.style.display = "none";
            labelconn.style.display = "block";
            button1.style.display = "block";
             
        }
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5541 posts

    Posted 03 Dec 2012 Link to this post

    Hello,

    You are using the RadWindow's ContenTemplate. How to access controls inside is shown in the following resources:
    http://www.telerik.com/help/aspnet-ajax/window-controls-container.html
    http://demos.telerik.com/aspnet-ajax/window/examples/contenttemplatevsnavigateurl/defaultcs.aspx

    What you have is attempting to use is as if a page were loaded inside - the get_contentFrame() method is not needed in this case and since you are modifying the DOM objects you need $get() and not $find():
    function reset2()
    {
        var image = $get("<%=ImageWait.ClientID %>");
        var label = $get("<%=LabelConnecting.ClientID %>");
     
        var labelconn = document.getElementById("Div1");
        var button1 = docuement.getElementById("Button1");
        image.style.display = "none";
        label.style.display = "none";
        labelconn.style.display = "block";
        button1.style.display = "block";
     
    }



    Greetings,
    Marin Bratanov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. Jean-Marc
    Jean-Marc avatar
    93 posts
    Member since:
    Mar 2011

    Posted 03 Dec 2012 Link to this post

    Thank you, Now it works
Back to Top