Dialog controls not rendering correctly

2 posts, 1 answers
  1. Stretch
    Stretch avatar
    2 posts
    Member since:
    Dec 2011

    Posted 21 May 2012 Link to this post

    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
  2. Answer
    Pero
    Admin
    Pero avatar
    1156 posts

    Posted 24 May 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top