RadWindow won't stay on screen

3 posts, 0 answers
  1. Raeshawn
    Raeshawn avatar
    9 posts
    Member since:
    Jul 2013

    Posted 30 Jan 2014 Link to this post

    <%@ 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. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 31 Jan 2014 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Raeshawn
    Raeshawn avatar
    9 posts
    Member since:
    Jul 2013

    Posted 26 Aug 2014 Link to this post

    Thanks
Back to Top