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

Load page.aspx into radtooltip

3 Answers 189 Views

ToolTip

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

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

<html xmlns="http://www.w3.org/1999/xhtml">

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

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

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.

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>