Skip to content

Commit d9b1e30

Browse files
JekataJekata
committed
kb(editor): customize image manager dialog caller button
1 parent 9382829 commit d9b1e30

File tree

1 file changed

+161
-0
lines changed

1 file changed

+161
-0
lines changed

‎knowledge-base/editor-customize-image-manager-imagedialogcaller-button.md‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
---
2+
title: Call a custom dialog from the Image Manager ImageDialogCaller button
3+
description: The purpose of the ImageDialogCaller user control is to launch the built-in Image Manager dialog, from dialogs like the ImageMap, SetimageProperties, Table and Cell Properties and Style Builder, and to return its value back to the opener dialog. See how you can customize it and launch a custom Image Manager dialog from it in RadEditor for ASP.NET AJAX.
4+
type: how-to
5+
page_title: Call a custom dialog from the Image Manager ImageDialogCaller button
6+
slug: editor-customize-image-manager-imagedialogcaller-button
7+
position:
8+
tags:
9+
ticketid: 1563109
10+
res_type: kb
11+
---
12+
13+
## Environment
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>RadEditor for ASP.NET AJAX</td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
24+
## Description
25+
The purpose of the ImageDialogCaller user control is to launch the built-in Image Manager dialog, from dialogs like the ImageMap, SetImageProperties, Table and Cell Properties and Style Builder, and to return its value back to the opener dialog. See how you can customize it and launch a custom Image Manager dialog from it in RadEditor for ASP.NET AJAX.
26+
27+
## Solution
28+
Here is the solution:
29+
30+
1) Copy the EditorDialogs folder from the [Telerik UI for ASP.NET AJAX](https://demos.telerik.com/aspnet-ajax/editor/examples/externaldialogspath/defaultcs.aspx) installation to the root of your project
31+
2) Set the editor's ExternalDialogsPath property to point to the EditorDialogs folder, e.g.
32+
33+
````ASP.NET
34+
<telerik:RadEditor ID="RadEditor1" runat="server" ExternalDialogsPath="~/EditorDialogs">
35+
<ImageManager ViewPaths="~/Images" UploadPaths="~/Images" />
36+
<Content>
37+
<img alt="my image" src="someimage.png" />
38+
</Content>
39+
</telerik:RadEditor>
40+
````
41+
3) Open the \EditorDialogs\ImageMap.ascx file, locate the
42+
43+
44+
````ASP.NET
45+
<tools:ImageDialogCaller id="ImageSrc" runat="server" />
46+
<!--
47+
The purpose of the ImageDialogCaller user control is to launch the built-in Image Manager dialog, from dialogs like the ImageMap, SetimageProperties, Table and Cell Properties and Style Builder, and to return its value back to the opener dialog which in our case is the ImageMap Image file selection input.
48+
-->
49+
````
50+
51+
control and paste the following script below it which will override the built-in _onButtonClickHandler handler of the ImageDialogCaller and allow the communication with the custom Image Manager dialog:
52+
53+
````JavaScript
54+
<script type="text/javascript">
55+
Telerik.Web.UI.ImageDialogCaller.prototype._onButtonClickHandler = function(e)
56+
{
57+
var thisObject = this;
58+
var callbackfunction = function(sender, args)
59+
{
60+
var src = args;
61+
if (src)
62+
{
63+
thisObject._inputElement.value = src;
64+
thisObject.raiseEvent("valueSelected");
65+
}
66+
}
67+
var args = {editor : this.get_editor()};
68+
69+
this._editor.showExternalDialog(
70+
'CustomImageManager.aspx', //specify here the custom dialog file name
71+
args,
72+
600,
73+
400,
74+
callbackfunction,
75+
null,
76+
'CustomImageManager',
77+
true,
78+
null,
79+
false,
80+
false)
81+
};
82+
</script>
83+
````
84+
85+
>note The CustomImageManager.aspx parameter of showExternalDialog is the custom dialog that will be opened when clicking on the Image Manager (ImageDialogCaller) button
86+
87+
4) Here is the content of the test image manager custom dialog - CustomImageManager.aspx, which should be placed at the root of the web project:
88+
89+
````ASP.NET
90+
<%@ Page language="c#" %>
91+
92+
<!DOCTYPE HTML >
93+
<html>
94+
<head>
95+
<title>Image Manager</title>
96+
<script type="text/javascript">
97+
function getRadWindow() //mandatory for the RadWindow dialogs functionality
98+
{
99+
if (window.radWindow)
100+
{
101+
return window.radWindow;
102+
}
103+
if (window.frameElement && window.frameElement.radWindow)
104+
{
105+
return window.frameElement.radWindow;
106+
}
107+
return null;
108+
}
109+
110+
function initDialog() //called when the dialog is initialized
111+
{
112+
var clientParameters = getRadWindow().ClientParameters; //return the arguments supplied from the parent page
113+
}
114+
115+
if (window.attachEvent)
116+
{
117+
window.attachEvent("onload", initDialog);
118+
}
119+
else if (window.addEventListener)
120+
{
121+
window.addEventListener("load", initDialog, false);
122+
}
123+
124+
function GetImageUrl(listBoxId )
125+
{
126+
var listbox = document.getElementById( listBoxId );
127+
var url = listbox[listbox.selectedIndex].value;
128+
if( url != "" )
129+
{
130+
getRadWindow().close(url); //use the close function of the getRadWindow to close the dialog and pass the arguments from the dialog to the callback function of the ImageMap dialog
131+
}
132+
}
133+
</script>
134+
</head>
135+
<body>
136+
<form id="Form1" method="post" runat="server">
137+
<table id="Table1" cellSpacing="0" cellPadding="1" border="0">
138+
<tr>
139+
<td colspan=2>Select an image:</td>
140+
</tr><TR>
141+
<TD>
142+
<asp:ListBox id="ListBox1" runat="server" Width="224px" Rows="8">
143+
<asp:ListItem Value="http://www.telerik.com/demos/aspnet/Editor/Img/productBox.gif">Image1</asp:ListItem>
144+
<asp:ListItem Value="http://www.telerik.com/demos/aspnet/Editor/Img/productBox.gif">Image2</asp:ListItem>
145+
<asp:ListItem Value="http://www.telerik.com/demos/aspnet/Editor/Img/productBox.gif">Image3</asp:ListItem>
146+
<asp:ListItem Value="http://www.telerik.com/demos/aspnet/Editor/Img/productBox.gif">Image4</asp:ListItem>
147+
<asp:ListItem Value="http://www.telerik.com/demos/aspnet/Editor/Img/productBox.gif">Image5</asp:ListItem>
148+
</asp:ListBox></TD>
149+
<TD vAlign="top">
150+
<button id="Button1" onclick="return GetImageUrl('<%=this.ListBox1.ClientID%>');" style="BORDER-RIGHT: dimgray 1px solid; BORDER-TOP: dimgray 1px solid; BORDER-LEFT: dimgray 1px solid; WIDTH: 64px; BORDER-BOTTOM: dimgray 1px solid; HEIGHT: 24px" type=button>Insert</Button></TD>
151+
</TR>
152+
</table>
153+
</form>
154+
</body>
155+
</html>
156+
````
157+
158+
## See Also
159+
* [Customize RadEditor built-in dialogs](https://demos.telerik.com/aspnet-ajax/editor/examples/externaldialogspath/defaultcs.aspx)
160+
161+

0 commit comments

Comments
 (0)