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

Dialog controls not rendering correctly

1 Answer 147 Views
ImageEditor
This is a migrated thread and some comments may be shown as answers.
Stretch
Top achievements
Rank 1
Stretch asked on 21 May 2012, 08:13 PM
I am using a RadUpload control to select an image on the client machine to load into the image editor.  I use a RadAjaxManager and its OnAjaxRequest event to load the image into the editor.  That all works fine except I can't get the RadImageEditor's dialogue's to render correctly.  The dialogue's work for the most part except their controls don't display images and the slider in the zoom dialogue renders as a set of link buttons.  I see in the known issues that if the image editor is in an update panel the UpdateMode should be set to Conditional.  But I don't know how to handle this with the RadAjaxManager.

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
    </telerik:RadStyleSheetManager>
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <%--Needed for JavaScript IntelliSense in VS2010--%>
            <%--For VS2008 replace RadScriptManager with ScriptManager--%>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <telerik:RadFormDecorator runat="server" DecoratedControls="All" />
       <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest" RequestQueueSize="3">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadImageEditor1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
 
            var radUpload;
            var radUploadInputs;
            var radImageEditor;
 
            function pageLoad()
            {
                radUpload = $find("<%= RadUpload1.ClientID %>");
                radUploadInputs = $find("<%= RadUpload1.ClientID%>").getFileInputs();
 
                 
                 
            }
 
            function RadUpload1_ClientFileSelected(sender, args)
            {
                var item = radUploadInputs[0].value;
                var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
                ajaxManager.ajaxRequest(item);
            }
 
            function RadImageEditor1_ClientLoad(sender, args)
            {
                radImageEditor = $find(sender.get_id());
                radImageEditor = $telerik.toImageEditor(radImageEditor);
                //radImageEditor.zoomBestFit();
            }
 
            function ImageEditor_OnClientSaved(imgEditor, args)
            {
                radUpload.clearFileInputAt(0);
 
                Close();
            }
 
            function Close()
            {
                GetRadWindow().close();   
            }
 
            function GetRadWindow()
            {
                var oWindow = null;
                if (window.radWindow) oWindow = window.radWindow; //Will work in Moz in all cases, including classic dialog
                else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow; //IE (and Moz as well)
 
                return oWindow;
            }
 
        </script>
    </telerik:RadCodeBlock>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadUpload ID="RadUpload1" runat="server" AllowedFileExtensions="jpg,jpeg,png,gif,bmp"
        OnClientFileSelected="RadUpload1_ClientFileSelected" MaxFileInputsCount="1" FocusOnLoad="true"
        InitialFileInputsCount="1" ControlObjectsVisibility="None">
    </telerik:RadUpload>
    <telerik:RadImageEditor ID="RadImageEditor1" runat="server" ExternalDialogsPath="~/App/ImageEditorDialogs"
        Width="300px" Height="300px" OnClientSaved="ImageEditor_OnClientSaved" StatusBarMode="Hidden"
        ToolsLoadPanelType="XmlHttpPanel" EnableResize="false" OnClientLoad="RadImageEditor1_ClientLoad">
        <Tools>
            <telerik:ImageEditorToolGroup>
                <telerik:ImageEditorTool CommandName="Save" />
                <telerik:ImageEditorTool CommandName="Print" />
                <telerik:ImageEditorToolSeparator />
                <telerik:ImageEditorToolStrip CommandName="Undo" Text="Undo" />
                <telerik:ImageEditorToolStrip CommandName="Redo" Text="Redo" />
                <telerik:ImageEditorToolSeparator />
                <telerik:ImageEditorTool CommandName="Crop" />
                <telerik:ImageEditorTool CommandName="Resize" Text="Resize" IsToggleButton="false" />
                <telerik:ImageEditorTool CommandName="Zoom" />
            </telerik:ImageEditorToolGroup>
        </Tools>
    </telerik:RadImageEditor>
    </form>
</body>
</html>

Imports System
Imports System.Drawing
Imports System.IO
Imports EHR.Web.UI
Imports Telerik.Web.UI
Imports Telerik.Web.UI.ImageEditor
 
Imports System.Collections.Generic
Imports System.Web
Imports Telerik.Web.UI.Widgets
Imports System.Xml
Imports System.Text.RegularExpressions
 
 
Public Class AddPatImage
    Inherits EhrPage
 
 
    'Private pathToImage As String = "~/PatImages/Images/shield.png"
    Private pathToImage As String = "~/Images/silhouette.gif"
    Private pathToThumbs As String = "~/PatImages/Thumbs/"
 
 
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Me.PatID = 42815
        Me.UserID = 61
        If Not IsPostBack Then
 
        End If
 
    End Sub
 
 
 
    Protected Sub RadAjaxManager1_AjaxRequest(sender As Object, e As AjaxRequestEventArgs) Handles RadAjaxManager1.AjaxRequest
 
        pathToImage = e.Argument
        RadImageEditor1.ImageUrl = pathToImage
 
    End Sub
 
 
 
    Protected Sub RadImageEditor1_ImageSaving(sender As Object, args As Telerik.Web.UI.ImageEditorSavingEventArgs) Handles RadImageEditor1.ImageSaving
 
        Dim image = args.Image.Clone().Image
 
        'image.Resize(32, 32)
 
        'Dim ms = New MemoryStream()
        'image.Image() '.Save(ms, image.RawFormat)
        'File.WriteAllBytes([String].Format("{0}{1}.{2}", MapPath(pathToThumbs),
        'args.FileName, image.Format), DirectCast(ms.ToArray(), Byte()))
 
        'Save image to Patients record using the PatientImage_Insert web method.
        With clsEMR
            .PatientPhoto_Insert(Me.PatID, ImageToByte(image), Me.UserID)
        End With
 
    End Sub
 
    Public Shared Function ImageToByte(ByVal img As System.Drawing.Image) As Byte()
        Dim imgStream As MemoryStream = New MemoryStream()
 
        img.Save(imgStream, System.Drawing.Imaging.ImageFormat.Jpeg)
 
        imgStream.Close()
        Dim byteArray As Byte() = imgStream.ToArray()
        imgStream.Dispose()
 
        Return byteArray
    End Function
 
    Protected Sub RadImageEditor1_ImageLoading(sender As Object, args As Telerik.Web.UI.ImageEditorLoadingEventArgs) Handles RadImageEditor1.ImageLoading
 
        args.Image = New EditableImage(MapPathSecure(pathToImage))
        args.Cancel = True
 
    End Sub
End Class

1 Answer, 1 is accepted

Sort by
0
Accepted
Pero
Telerik team
answered on 24 May 2012, 04:28 PM
Hi,

The problem in your case comes from the fact that you are using the RadImageEditor with ToolsLoadPanelType="XmlHttpPanel". This means that the ImageEditor will use RadXmlHttpPanel to load its dialogs and the XmlHttpPanel has known issues when used with RadScriptManager and RadStyleSheetManager described in its Known Issues help section.
My suggestion is to set ToolsLoadPanelType="AjaxPanel" to the ImageEditor. Alternatively, you can disable the script and stylesheet combining on the respective managers.

Kind regards,
Pero
the Telerik team
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 RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
ImageEditor
Asked by
Stretch
Top achievements
Rank 1
Answers by
Pero
Telerik team
Share this question
or