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

Rad Editor in ModalPopUpExtender

3 Answers 154 Views

Editor

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

Hemamalini asked on 14 Dec 2010, 07:35 AM

Hi,

I use RadEditor inside ModalpopUpExtender in our Project.. I use ImageManager Tool in RadEditor.. When i click on the Image Manager tool, its dialog window gets opened behind Rad Editor..

<telerik:RadEditor ID="radEditorDescription" NewLineBr="false" EnableResize="false"

runat="server" Width="620px" TabIndex="29" CssClass="maarginleft20 marginBottom20">

<Tools>

<telerik:EditorToolGroup Tag="MainToolbar">

<%--<telerik:EditorTool Name="AjaxSpellCheck" />--%>

<telerik:EditorTool Name="FindAndReplace" ShortCut="CTRL+F" />

<telerik:EditorTool Name="Undo" ShortCut="CTRL+Z" />

<telerik:EditorTool Name="Redo" ShortCut="CTRL+Y" />

<telerik:EditorTool Name="Indent" />

<telerik:EditorTool Name="Outdent" />

<telerik:EditorTool Name="TableWizard" />

<telerik:EditorTool Name="InsertSymbol" />

<telerik:EditorTool Name="JustifyLeft" />

<telerik:EditorTool Name="JustifyRight" />

<telerik:EditorTool Name="JustifyFull" />

</telerik:EditorToolGroup>

<telerik:EditorToolGroup Tag="FileManagers">

<telerik:EditorTool Name="ImageManager" />

</telerik:EditorToolGroup>

<telerik:EditorToolGroup>

<telerik:EditorTool Name="Bold" />

<telerik:EditorTool Name="Italic" />

<telerik:EditorTool Name="Underline" />

<telerik:EditorSeparator />

<telerik:EditorTool Name="ForeColor" />

<telerik:EditorTool Name="BackColor" />

<telerik:EditorSeparator />

<telerik:EditorTool Name="FontName" />

<telerik:EditorTool Name="RealFontSize" />

</telerik:EditorToolGroup>

</Tools>

<CssFiles>

<telerik:EditorCssFile Value="~/App_Themes/Web20/Editor.css" />

</CssFiles>

</telerik:RadEditor>

<ajaxToolkit:ModalPopupExtender ID="ModalPopupSwitchUserMenu" runat="server" TargetControlID="linkButtonDesc"

PopupControlID="EditorPanel" BackgroundCssClass="watermarked" BehaviorID="SwitchUserMenuPopup"

X="200" Y="50" RepositionMode="RepositionOnWindowResize" Drag="true" PopupDragHandleControlID="MyOptionsTitleBar"

CancelControlID="ImageButtonClose" OkControlID="ImageButton1" />

Please Guide me..

3 Answers, 1 is accepted

answered on 15 Dec 2010, 02:40 PM

Hi Hemamalini,

The modal popup extender has z-index set to 10001 while the image manager dialog has z-index set to 3002. In order to get the dialog show above the modal popup extender you should either set z-index for the extender less than 3002 or set z-index for the dialog bigger than 10001.

All the best,
Svetlina
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 16 Dec 2010, 05:55 AM

Hi Svetlina,

Thanks for ur reply.. Where should i set the Z-Index property exactly.. i have set the Z-Index property in div enclosed with modalpopupextender..

<telerik:RadEditor ID="radEditorDescription" NewLineBr="false" EnableResize="false"

runat="server" Width="620px" TabIndex="29" CssClass="maarginleft20 marginBottom20">

<Tools>

<telerik:EditorToolGroup Tag="MainToolbar">

<%--<telerik:EditorTool Name="AjaxSpellCheck" />--%>

<telerik:EditorTool Name="FindAndReplace" ShortCut="CTRL+F" />

<telerik:EditorTool Name="Undo" ShortCut="CTRL+Z" />

<telerik:EditorTool Name="Redo" ShortCut="CTRL+Y" />

<telerik:EditorTool Name="Indent" />

<telerik:EditorTool Name="Outdent" />

<telerik:EditorTool Name="TableWizard" />

<telerik:EditorTool Name="InsertSymbol" />

<telerik:EditorTool Name="JustifyLeft" />

<telerik:EditorTool Name="JustifyRight" />

<telerik:EditorTool Name="JustifyFull" />

</telerik:EditorToolGroup>

<telerik:EditorToolGroup Tag="FileManagers">

<telerik:EditorTool Name="ImageManager" />

</telerik:EditorToolGroup>

<telerik:EditorToolGroup>

<telerik:EditorTool Name="Bold" />

<telerik:EditorTool Name="Italic" />

<telerik:EditorTool Name="Underline" />

<telerik:EditorSeparator />

<telerik:EditorTool Name="ForeColor" />

<telerik:EditorTool Name="BackColor" />

<telerik:EditorSeparator />

<telerik:EditorTool Name="FontName" />

<telerik:EditorTool Name="RealFontSize" />

</telerik:EditorToolGroup>

</Tools>

<CssFiles>

<telerik:EditorCssFile Value="~/App_Themes/Web20/Editor.css" />

</CssFiles>

</telerik:RadEditor>

</div>

<div class="maarginleft200 marginBottom15">

<asp:ImageButton runat="server" TabIndex="30" ID="ImageButtonOk" ImageUrl="~/Images/ok_btn.png" />

<asp:ImageButton runat="server" TabIndex="31" ID="ImageButtonClose" ImageUrl="~/Images/cancel_btn.png" />

</div>

</asp:Panel>

</div>

<div class="ModalPopUpExtenderIndex">

<ajaxToolkit:ModalPopupExtender ID="ModalPopupSwitchUserMenu" runat="server" TargetControlID="linkButtonDesc"

PopupControlID="EditorPanel" BackgroundCssClass="watermarked" BehaviorID="SwitchUserMenuPopup"

X="200" Y="50" RepositionMode="RepositionOnWindowResize" Drag="true" PopupDragHandleControlID="MyOptionsTitleBar"

CancelControlID="ImageButtonClose" OkControlID="ImageButton1" />

</div>

and the css for this are

.ModalPopUpExtenderIndex

{

z-index:1000 !important;

}

The problem still exists.. Please help me..

Thanks,
Hema.