ImageEditor inside RadWindow, Dialog problems

9 posts, 0 answers
  1. Dirk
    Dirk avatar
    8 posts
    Member since:
    Aug 2011

    Posted 01 Sep 2011 Link to this post

    Hello,

    I'm trying  to make a popup window which contains the imageEditor.
    I'm getting a similar problem as an earlier post here (with no solution), when I click a tool in the imageeditor, the dialog appears behind my window.
    I can move the window so I can select the dialog and use its functionality.But there seem to be going more things wrong since the dialogs function, but are not properly filled in with data (for example the resize dialog contains 0 0 as with and height).

    Is the imageeditor not meant to work inside a radwindow?

    The code I use:
    <telerik:RadWindow ID="winImageEditor" runat="server" VisibleStatusbar="false" 
                       ShowContentDuringLoad="false" Modal="false" Behaviors="Close,Move,Resize" Title="Edit Image">
        <ContentTemplate>
            <telerik:RadImageEditor ID="iedImageEditor" runat="server" >
            </telerik:RadImageEditor>
        </ContentTemplate>
    </telerik:RadWindow>



    Any help would be appreciating since I'm running out of time to fix this.
  2. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 02 Sep 2011 Link to this post

    Hello Dirk,

    This is related to the higher RadWidnow z-index property, actually RadDock in RadImage Editor does not have a z-index specified for some reasons related to the RadDock controls itself. For now, you could use the following CSS fix:

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
            .rieDialogs
            {
                z-index: 10000;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="sm" runat="server" />
        <telerik:RadWindow ID="winImageEditor" runat="server" VisibleStatusbar="false" ShowContentDuringLoad="false"
            Modal="false" Behaviors="Close,Move,Resize" Title="Edit Image" VisibleOnPageLoad="true">
            <ContentTemplate>
                <telerik:RadImageEditor ID="iedImageEditor" runat="server">
                </telerik:RadImageEditor>
            </ContentTemplate>
        </telerik:RadWindow>
        </form>
    </body>
    </html>

    You could use it as in the same - in the head section of the document, or to put in in an external stylesheet resource, which will be loaded on the page.

    Best wishes,
    Bojo
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dirk
    Dirk avatar
    8 posts
    Member since:
    Aug 2011

    Posted 06 Sep 2011 Link to this post

    Thanks Bojo,

    The Css fixed the display order of the dialogs. This still leaves me with the issue that the dialogs themselves are not filled out correctly.

    For example the "Resize" dialog does not have the usual dropdownlist and everything inside has an incorrect layout. The biggest problem however is that the values are not correctly filled in, for example in the layout the width and height are just 0.

    I attached an image showing this problem.

    Any help would be greatly appreciated.

  5. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 06 Sep 2011 Link to this post

    Hello Dirk,

    to fix the dropdown list, you should change the Dock z-nidex from 10000 to 5000:

    <style type="text/css">
            .rieDialogs
            {
                z-index: 5000;
            }
        </style>

    As for the layout problem, that is already fixed and the fix is available with the latest internal build, or you could wait for the next official release Q2 Service pack 1 scheduled for the next week.

    Kind regards,
    Bojo
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  6. Dirk
    Dirk avatar
    8 posts
    Member since:
    Aug 2011

    Posted 06 Sep 2011 Link to this post

    Hello Bojo,

    Thank you for your reply.
    I downloaded the latest internal build and changed the z-index but the issue still persists. The dialog is identical to the one in my attached screenshot, I still see no dropdown, but i can click the area which reveals the dropdownlist options in plain text.
    The options do not show up in a print-screen so I can't provide you with a picture.

    Are you able to reproduce the issues? Or do you have a workign example of an imageeditor in the contentTemplate of a RadWindow?


  7. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 07 Sep 2011 Link to this post

    Hi Dirk,

    I meant that in the latest internal build is fixed the layout problem that could be seen in IE7 in the crop dialogs. We put some additional CSS class to be styles to fix the necessary input width in order to keep the layout good looking.

    The following code works as expected with z-index and dropdown in the crop dialog:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            .rieDialogs
            {
                z-index: 5000;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="sm" runat="server" />
        <telerik:RadWindow ID="winImageEditor" runat="server" VisibleStatusbar="false" ShowContentDuringLoad="false"
            Modal="false" Behaviors="Close,Move,Resize" Title="Edit Image" VisibleOnPageLoad="true">
            <ContentTemplate>
                <telerik:RadImageEditor ID="iedImageEditor" runat="server">
                </telerik:RadImageEditor>
            </ContentTemplate>
        </telerik:RadWindow>
        </form>
    </body>
    </html>

    Attached is cropDropdown.jpg showing the result in the browser.

    Greetings,
    Bojo
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  8. Jonathan
    Jonathan avatar
    47 posts
    Member since:
    Sep 2010

    Posted 12 Aug 2012 Link to this post

    Hi,

    I followed your example to use the z-index to correct how the dialog displays. However, I'm still having a problem where I can't move the crop frame, nor can I change the numbers in the dialog that appear without them resetting to zero. This only occurs in IE. It's perfectly fine in Firefox and Chrome.

    I'm using build 2012.2.724.40 (2012 Q2 SP1). Is this a known issue?

    Thanks in advance,
    Jonathan
  9. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 14 Aug 2012 Link to this post

    Hi,

    I have prepared a short video showing my test with that scenario testing with IE and FireFox and almost everything is the same in both browsers. Could you provide us more details about the issue and how to reproduce it?

    All the best,
    Bozhidar
    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.
  10. Jonathan
    Jonathan avatar
    47 posts
    Member since:
    Sep 2010

    Posted 26 Oct 2012 Link to this post

    Hello Bozidar,

    This bug appears to have been fixed in build 2012.3.1016.40 (2012 Q3). Thanks anyway.

    Regards,
    Jonathan
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017