This is a migrated thread and some comments may be shown as answers.

Rawindow controls inside its contenttemplate

2 Answers 306 Views

Window

This is a migrated thread and some comments may be shown as answers.

Jean-Marc asked on 30 Nov 2012, 05:00 PM

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

</div>

</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>--%>

<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 Answers, 1 is accepted

answered on 03 Dec 2012, 12:31 PM

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.