Load page.aspx into radtooltip

4 posts, 0 answers
  1. Fabio Cirillo
    Fabio Cirillo avatar
    180 posts
    Member since:
    Jan 2010

    Posted 22 Mar 2013 Link to this post

    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
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 24 Mar 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Fabio Cirillo
    Fabio Cirillo avatar
    180 posts
    Member since:
    Jan 2010

    Posted 25 Mar 2013 Link to this post

    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>

  5. rdmptn
    rdmptn avatar
    72 posts
    Member since:
    Aug 2011

    Posted 27 Mar 2013 Link to this post

    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>

Back to Top