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

RadWindow won't stay on screen

2 Answers 109 Views

Window

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

Raeshawn asked on 30 Jan 2014, 06:14 PM

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadFile.aspx.cs" Inherits="NewBusiness.UploadFile" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.rieDialogs
{
z-index: 10000;
}
#modalPopup_C
{
overflow:hidden !important;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"></telerik:RadAjaxManager>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
<telerik:RadSkinManager ID="RadSkinManager1" runat="server"></telerik:RadSkinManager>
<telerik:RadWindowManager ID="RadWindowManager1" runat="server"></telerik:RadWindowManager>
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script>
var dialog;
var uploadedFilesCount = 0;

function OnClientFileUploaded(sender, eventArgs) {
uploadedFilesCount++;
}

function validateRadAsyncUpload(source, e) {
if (uploadedFilesCount > 0)
e.IsValid = true;
else
e.IsValid = false;
}

function showImageEditor() {
dialog = $find("<%= RwImageEditor.ClientID %>");
if (dialog) {
dialog.show();
}
else
radalert("Unable to locate image editor window.", 330, 110, "Debug");
}

//Callback function for the custom save button in the ImageEditor
function closeImageEditor(clientData, serverData) {
if (dialog)
dialog.close();
else
radalert("Unable to locate image editor window.", 330, 110, "Debug");
}

//Automatically resize image to 100 x 100 if it is cropped
function imgEditorImageChanged(imgEditor, args) {
setTimeout(function () {
if (args.get_commandName() == "Crop")
imgEditor.resizeImage(100, 100, true);
}, 500);
}

//Create a custom save command for the image editor
Telerik.Web.UI.ImageEditor.CommandList.SavePicture = function (imageEditor, commandName, args) {
imageEditor.saveImageOnServer("Picture", true);
closeImageEditor();
}

</script>
</telerik:RadScriptBlock>
<table>
<tr>
<td>
<telerik:RadAsyncUpload runat="server" ID="RauPicture"
OnClientFileUploaded="OnClientFileUploaded" OnFileUploaded="RauPicture_FileUploaded"
AllowedFileExtensions="jpg,jpeg,png,gif" MaxFileSize="1048576" Width="250px">
</telerik:RadAsyncUpload>
<asp:Button ID="BtnUpload" Text="Upload Image" runat="server"
CausesValidation="False" Width="229px" OnClientClick="showImageEditor()">
</asp:Button>
</td>
</tr>
<tr>
<td>
<telerik:RadTextBox ID="TextBox1" runat="server" CausesValidation="True" Visible="false"
AutoAdjustImageControlSize="false" Height="80px" Width="80px" >
</telerik:RadTextBox>
<asp:CustomValidator ID="CvRauPicture" runat="server" ErrorMessage="Please select a picture." ControlToValidate="TextBox1" ClientValidationFunction="validateRadAsyncUpload" CssClass="errors" Text="ç"></asp:CustomValidator>
</td>
</tr>
</table>
<telerik:RadAjaxPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" EnableAJAX="true">
<telerik:RadWindow ID="RwImageEditor" runat="server" Animation="Fade"
AutoSize="True" Modal="False" VisibleStatusbar="False" Title="Edit Photo" EnableViewState="false" ShowContentDuringLoad="true" VisibleOnPageLoad="false">
<ContentTemplate>
<telerik:RadImageEditor ID="RadImageEditor1" runat="server" OnImageLoading="RadImageEditor1_ImageLoading"
OnClientImageChanged="imgEditorImageChanged">
<Tools>
<telerik:ImageEditorToolGroup>
<telerik:ImageEditorTool CommandName="SavePicture" />
<telerik:ImageEditorToolSeparator />
<telerik:ImageEditorToolStrip CommandName="Undo" />
<telerik:ImageEditorToolStrip CommandName="Redo" />
<telerik:ImageEditorToolStrip CommandName="Reset" />
<telerik:ImageEditorToolSeparator />
<telerik:ImageEditorTool CommandName="Crop" />
<telerik:ImageEditorTool CommandName="Resize" />
</telerik:ImageEditorToolGroup>
</Tools>
</telerik:RadImageEditor>
</ContentTemplate>
</telerik:RadWindow>
</telerik:RadAjaxPanel>
</form>
</body>
</html>

2 Answers, 1 is accepted

answered on 31 Jan 2014, 11:29 AM

Hello Raeshawn,

It would help if you explained what is the action that causes RadWindow to not stay on the screen, instead of leaving us guessing.

At this point, I can assume that the issue is with server events/actions invoked from the RadImageEditor, because it is in the ContentTemplate of the RadWindow. This article explains how to use AJAX in this case: http://www.telerik.com/help/aspnet-ajax/radwindow-ajaxifying.html.
The essence, is that you need the update panel in the ContentTEmplate, so that RadWindow itself is never disposed:

<telerik:RadWindow ID="RwImageEditor" runat="server" Animation="Fade" AutoSize="True"

Modal="False" VisibleStatusbar="False" Title="Edit Photo" EnableViewState="false"

ShowContentDuringLoad="true" VisibleOnPageLoad="false">

<ContentTemplate>

<telerik:RadAjaxPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" EnableAJAX="true">

<telerik:RadImageEditor ID="RadImageEditor1" runat="server"

OnClientImageChanged="imgEditorImageChanged">

<Tools>

<telerik:ImageEditorToolGroup>

<telerik:ImageEditorTool CommandName="SavePicture" />

<telerik:ImageEditorToolSeparator />

<telerik:ImageEditorToolStrip CommandName="Undo" />

<telerik:ImageEditorToolStrip CommandName="Redo" />

<telerik:ImageEditorToolStrip CommandName="Reset" />

<telerik:ImageEditorToolSeparator />

<telerik:ImageEditorTool CommandName="Crop" />

<telerik:ImageEditorTool CommandName="Resize" />

</telerik:ImageEditorToolGroup>

</Tools>

</telerik:RadImageEditor>

</telerik:RadAjaxPanel>

</ContentTemplate>

</telerik:RadWindow>

Regards,
Marin Bratanov
Telerik

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 UI for ASP.NET AJAX, subscribe to the blog feed now.