Dialog controls not rendering correctly

[Stretch]

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

[Pero]

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