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

Load page.aspx into radtooltip

3 Answers 132 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Fabio Cirillo
Top achievements
Rank 1
Fabio Cirillo asked on 22 Mar 2013, 05:33 PM
Hi,
 is possible load into Radtooltip a page aspx?

For example i've this page aspx that use to upload avatar image:

<%@ Page Language="vb" AutoEventWireup="true" CodeFile="UploadImgProfile.aspx.vb" Inherits="UploadImgProfile" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<head runat="server">
    <meta name="description" content="Trycontact; il social network che ti collega alla community con il tuo biglietto da visita virtuale." />
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <title>Upload image profile</title>
    </head>
<body style="border:0px; padding:0px; margin-top:0px; margin-left:0px; margin-right:0px; margin-bottom:0px">
    <form id="form1" runat="server">
    <telerik:RadAjaxManager runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Imgbtncarica">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadAjaxPanel1"
                        LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
        <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server"
        DecoratedControls="All" Skin="Sunset" />
         <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server"
             Skin="Simple" HorizontalAlign="Center" Width="350px" BorderColor="#D5842B"
             BorderStyle="Double" BorderWidth="1px">
         </telerik:RadAjaxLoadingPanel>
         <telerik:RadScriptManager ID="RadScriptManager1" Runat="server">
        </telerik:RadScriptManager>
    <div class="Divloadprofile">
          <div id="upload" class="Divloadprofile1">
             <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" HorizontalAlign="NotSet" ClientEvents-OnRequestStart="conditionalPostback">
                 <table style="border: 0px; margin: 0px; padding: 0px; width: 395px; text-align:center">
                     <tr>
                         <td style="border-style: none; border-color: inherit; border-width: 0px; margin: 0px; padding-top: 5px; text-align: center; height:23px">
                             <asp:CustomValidator ID="CustomValidator1" runat="server" ClientValidationFunction="validateRadUpload"
                                 ErrorMessage="File errato" ValidationGroup="carica"></asp:CustomValidator>
                         </td>
                     </tr>
                     <tr>
                         <td style="border-style: none; border-color: inherit; border-width: 0px; margin: 0px; padding-left:35px; vertical-align: top;">
                             <telerik:RadUpload ID="RadUpload1" Runat="server"
                              AllowedFileExtensions=".jpg,.jpeg,.png,.gif" OverwriteExistingFiles="True"
                              TargetFolder="image/image_utenti" ControlObjectsVisibility="None"
                              InputSize="40" Height="22px" style="text-align: left" Skin="Sunset"
                              Width="343px" MaxFileSize="3000000">
                             <Localization Select="Cerca" />
                             </telerik:RadUpload>
                             <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
                                 <script type="text/javascript">
                                     function conditionalPostback(sender, args) {
                                             if(args.get_eventTarget() == "<%= imgbtncarica.UniqueID %>")
                                                 args.set_enableAjax(false);
                                         }
                                         function validateRadUpload(source, e) {
                                             e.IsValid = false;
                                             var upload = $find("<%= RadUpload1.ClientID %>");
                                             var inputs = upload.getFileInputs();
                                             for (var i = 0; i < inputs.length; i++) {
                                                 //check for empty string or invalid extension    
                                                 if (inputs[i].value != "" && upload.isExtensionValid(inputs[i].value)) {
                                                     e.IsValid = true;
                                                     break;
                                                 }
                                             }
                                         }
                                         function GetRadWindow() {
                                             var oWindow = null;
                                             if (window.radWindow) oWindow = window.radWindow;
                                             else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
                                             return oWindow;
                                         }
                                         function Close(argument) {
                                             GetRadWindow().close(argument);
                                         }
                                         function Close1() {
                                             GetRadWindow().close();
                                         }
                                     </script>
                             </telerik:RadCodeBlock>
                         </td>
                     </tr>
                     <tr>
                         <td style="border-style: none; border-color: inherit; border-width: 0px; margin: 0px; vertical-align: top; height: 50px">
                             <div class="Divinfoupload">
                                  Il file deve avere le seguenti estensioni: jpg, jpeg, png, gif<br /> Il file
                                 deve avere una grandezza massima di 3 Mb.<br /> Risoluzione ottimale
                                 consigliata: 128x128 pixel.                           
                             </div>
                         </td>
                     </tr>
                 </table>           
                 <div style="width:395px; padding-top: 10px">
                <table style="width: 100%;">
                  <tr>
                <td style="text-align:center">
                    <asp:ImageButton ID="Imgbtncarica" runat="server" ImageUrl="~/Image/Upload.png"
                        ValidationGroup="carica" />
                </td>
                <td style="text-align:center">
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                        <ContentTemplate>
                             <asp:ImageButton ID="Imgbtnesci" runat="server" ImageUrl="~/Image/esci1.png"
                                 ValidationGroup="close" />
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </td>
            </tr>
            </table>
            </div>
         </telerik:RadAjaxPanel>
    </div>
    </div>
    </form>
</body>
</html>

in the mater page there's un image asp..i would that when the mouse rolls over the image, should appear radtooltip that loads the aspx page. if it is possible I would like to appear always radtooltip but inside a button, which can then be clicked to load the aspx page

3 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 25 Mar 2013, 04:38 AM
Hi Fabio,

Its possible to display an aspx page in a RadToolTip. Please have a look into the following sample code I tried at my end.

ASPX:
<telerik:RadButton ID="RadButton1" runat="server" Text="Mouse Over Here to show tooltip">
</telerik:RadButton>
<telerik:RadToolTip ID="RadToolTip1" runat="server" TargetControlID="RadButton1"
    ManualClose="true" Width="500px" Height="500px" Position="BottomRight">
    <iframe src="YourPage.aspx" width="500px" height="500px" style="border: none;">
    </iframe>
</telerik:RadToolTip>

Thanks,
Princy.
0
Fabio Cirillo
Top achievements
Rank 1
answered on 25 Mar 2013, 10:08 AM
Ok function, but I connected a radajaxloadingpanel but you do not see here is the code ..

<telerik:AjaxSetting AjaxControlID="Imgprofile">
    <UpdatedControls>
        <telerik:AjaxUpdatedControl ControlID="RadToolTip1"
            LoadingPanelID="RadAjaxLoadingPanel1" />
    </UpdatedControls>
</telerik:AjaxSetting>

0
rdmptn
Top achievements
Rank 1
answered on 27 Mar 2013, 09:34 AM
RadWindow is the control that loads pages and it is by far easier to use instead of hacking into the tooltip

Anyway, add a control inside the tooltip (e.g. an ASP Panel around the iframe) as an Updatedcontrol because the tooltip does not render in place, just like RadWindow.
<telerik:AjaxSetting AjaxControlID="Imgprofile">
    <UpdatedControls>
        <telerik:AjaxUpdatedControl ControlID="myWrapperPanel"
            LoadingPanelID="RadAjaxLoadingPanel1" />
    </UpdatedControls>
</telerik:AjaxSetting>

<telerik:RadToolTip ID="RadToolTip1" runat="server" TargetControlID="RadButton1"
    ManualClose="true" Width="500px" Height="500px" Position="BottomRight">
    <asp:Panel runat="server" ID="myWrapperPanel">
       <iframe src="YourPage.aspx" width="500px" height="500px" style="border: none;">
       </iframe>
    </asp:Panel>
</telerik:RadToolTip>

Tags
ToolTip
Asked by
Fabio Cirillo
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Fabio Cirillo
Top achievements
Rank 1
rdmptn
Top achievements
Rank 1
Share this question
or