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

ImageEditor inside RadWindow, Dialog problems

8 Answers 308 Views
ImageEditor
This is a migrated thread and some comments may be shown as answers.
Dirk
Top achievements
Rank 1
Dirk asked on 01 Sep 2011, 11:52 AM
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.

8 Answers, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 02 Sep 2011, 07:43 AM
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 >>

0
Dirk
Top achievements
Rank 1
answered on 06 Sep 2011, 10:54 AM
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.

0
Bozhidar
Telerik team
answered on 06 Sep 2011, 12:36 PM
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 >>

0
Dirk
Top achievements
Rank 1
answered on 06 Sep 2011, 02:01 PM
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?


0
Bozhidar
Telerik team
answered on 07 Sep 2011, 08:01 AM
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 >>

0
Jonathan
Top achievements
Rank 1
answered on 12 Aug 2012, 09:03 PM
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
0
Bozhidar
Telerik team
answered on 14 Aug 2012, 10:48 AM
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.
0
Jonathan
Top achievements
Rank 1
answered on 26 Oct 2012, 03:44 PM
Hello Bozidar,

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

Regards,
Jonathan
Tags
ImageEditor
Asked by
Dirk
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Dirk
Top achievements
Rank 1
Jonathan
Top achievements
Rank 1
Share this question
or