How call EditPropertyDialog to insert images from the galler - Sitefinity - Front- & Back-End Development

All Replies

Posted by Community Admin on 27-Sep-2011 00:00

Hello,

1.- I need to call "EditPropertyDialog" to insert images from the gallery.
I tried to follow some threads, but no luck with this. attached all the code I have so far.Can you help me or put a video or code more understandable?

2.- there is a possibility to access the gui MediaContentSelectorView control images from the server?, something like: this.myMediaContentSelectorView.GetSelectedImage ();

The EditPropertyDialog need to call it from a module.

send entire coding.

Thanks!

MODULE: TramosAddEditView.ascx

<%@ Control Language="C#" AutoEventWireup="true"CodeBehind="TramosAddEditView.ascx.cs"

Inherits="SitefinityWebApp.Modules.Tramos.Admin.TramosAddEditView"%>

<%@ Register Assembly="Telerik.Sitefinity"Namespace="Telerik.Sitefinity.Web.UI.Fields"

TagPrefix="sf" %>

<%@ Register Assembly="Telerik.Sitefinity"Namespace="Telerik.Sitefinity.Web.UI"

TagPrefix="telerik" %>

<%@ Register Assembly="Telerik.Sitefinity"Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers"

TagPrefix="sf" %>

<%@ Register TagPrefix="webCtrs" TagName="ucSelecImage"Src="~/UserControls/ImageSelector/ImageControlDesignerTemplate.ascx"%>

<%@ Register Assembly="Telerik.Sitefinity, Version=4.2.1650.0, Culture=neutral, PublicKeyToken=b28c218413bdf563"Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sitefinity" %>

<%--<script src="../../../App_Themes/tubebesanocam/Script/SimpleImageField.js"type="text/javascript"></script>--%>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

Tramos</h1>

<ul>

<asp:Label ID="lblNombre"runat="server" AssociatedControlID="txtNombreTramo" Text="Nombre"

CssClass="sfTxtLbl" />

<asp:TextBox ID="txtNombreTramo" runat="server" CssClass="sfTxt" />

<asp:RequiredFieldValidator ID="rfvNombre" runat="server" ErrorMessage="El nombre es requerido."

ControlToValidate="txtNombreTramo"ForeColor="#FF3300">*</asp:RequiredFieldValidator>

</li>

<asp:Label ID="lblEdad"runat="server" Text="Edad (N° de meses)" CssClass="sfTxtLbl" />

</li>

<asp:TextBox ID="txtEdadDesde"Text="Desde" Width="50px" runat="server" ValidationGroup="editTramos"></asp:TextBox>

<asp:TextBox ID="txtEdadHasta"Text="Hasta" Width="50px" runat="server" ValidationGroup="editTramos"></asp:TextBox>

<asp:RequiredFieldValidator ID="rfvEdadDesde" runat="server" ErrorMessage="Edad desde es requerido."

ControlToValidate="txtEdadDesde"ValidationGroup="editTramos" ForeColor="#FF3300">*</asp:RequiredFieldValidator>

<asp:RequiredFieldValidator ID="rfvEdadHasta" runat="server" ErrorMessage="Edad hasta es requerido."

ControlToValidate="txtEdadHasta"ValidationGroup="editTramos" ForeColor="#FF3300">*</asp:RequiredFieldValidator>

<asp:RangeValidator ID="rvDesde" runat="server" ErrorMessage="Meses desde no tiene un formato correcto (0 a 100)"

Text="*"MaximumValue="100" MinimumValue="0" Type="Integer"ValidationGroup="editTramos"

ForeColor="Red"ControlToValidate="txtEdadDesde"></asp:RangeValidator>

<asp:RangeValidator ID="rvHasta" runat="server" ErrorMessage="Meses hasta no tiene un formato correcto (1 a 100)"

Text="*" MinimumValue="1"MaximumValue="100" Type="Integer" ValidationGroup="editTramos"

ForeColor="Red"ControlToValidate="txtEdadHasta">

</asp:RangeValidator>

</li>

<li>

<asp:Label ID="lblColorFondo"runat="server" Text="Color de fondo" CssClass="sfTxtLbl" />

<telerik:RadColorPicker ID="PickerColorFondo" runat="server" ShowIcon="true" AutoPostBack="true"

PaletteModes="WebPalette"EnableCustomColor="true" OnColorChanged="PickerColorFondo_ColorChanged">

</telerik:RadColorPicker>

</li>

<li>

<asp:Label ID="lblColorBorde"runat="server" Text="Color de borde" CssClass="sfTxtLbl" />

<telerik:RadColorPicker ID="PickerColorBorde" runat="server" ShowIcon="true" AutoPostBack="true"

PaletteModes="WebPalette"EnableCustomColor="true" OnColorChanged="PickerColorBorde_ColorChanged">

</telerik:RadColorPicker>

</li>

<li>

<asp:Label ID="lblHome"runat="server" Text="Home" CssClass="sfTxtLbl" />

<telerik:RadTreeView ID="treeHome" runat="server" OnNodeClick="treeHome_NodeClick">

</telerik:RadTreeView>

</li>

<li>

<asp:Label ID="lblImagenFondo"runat="server" Text="Imagen de Fondo" CssClass="sfTxtLbl" />

<asp:TextBox ID="txtRutaImagen"runat="server" />

<webCtrs:ucSelecImage ID="ucImage" runat="server" />

</li>

<asp:Label ID="lblError"ForeColor="Red" runat="server" Text=""></asp:Label>

</li>

</ul>

</div>

<asp:ValidationSummary ID="ValidationSummary1" runat="server"BackColor="White" BorderWidth="0"

HeaderText="Lista de errores:" BorderColor="Red"DisplayMode="List" Font-Bold="False"

ForeColor="#FF3300" />

<asp:Button ID="btnSave" runat="server" Text="Guardar Tramo"ValidationGroup="editTramos"

CssClass="sfSave" OnClick="btnSave_Click" />

o <a class="sfCancel" href="<%= ResolveUrl(Telerik.Sitefinity.Web.SiteMapBase.GetActualCurrentNode().ParentNode.Url)%>">

Cancelar y volver</a>

</div>

</fieldset>

MODULE: TramosAddEditView.ascx.cs

001.using System;

002.using System.Collections.Generic;

003.using System.Linq;

004.using System.Web;

005.using System.Web.UI;

006.using System.Web.UI.WebControls;

007.using Telerik.Sitefinity.Web;

008.using System.Web.UI.HtmlControls;

009.using System.Web.Services;

010.using Telerik.Web.UI;

011.using Telerik.Sitefinity.Modules.Libraries;

012.using SitefinityWebApp.Data;

013.using System.Collections;

014.using System.ComponentModel;

015.using System.Data;

016.using System.Drawing;

017.using System.Web.SessionState;

018.using Telerik.Sitefinity.Workflow;

019.using Telerik.Sitefinity.Web.UI.ControlDesign;

020.using System.Text;

021.using Telerik.Sitefinity;

022.using SitefinityWebApp.Data;

023.using SitefinityWebApp.UserControls.ImageSelector;

024.

025.namespace SitefinityWebApp.Modules.Tramos.Admin

026.

027. [ControlDesigner(typeof(UserControls.ImageSelector.ImageControlDesignerTemplate)), PropertyEditorTitle("Selector de Imagen")]

028. public partial class TramosAddEditView : System.Web.UI.UserControl

029.

030. #region Check Mode

031.

032. public enum AdminControlMode

033.

034. Create,

035. Edit,

036. Delete

037.

038.

039. public AdminControlMode Mode get return _mode; set _mode = value;

040. private AdminControlMode _mode;

041.

042. private int idTramo = -1;

043.

044. protected int IdTramo

045.

046. get

047.

048. if (idTramo == -1)

049.

050. var param = Request.RequestContext.RouteData.Values["Params"] as string[];

051. if (param == null) idTramo = 0;

052.

053. int id;

054. idTramo = Int32.TryParse(param[0], out id) ? id : 0;

055.

056. return idTramo;

057.

058.

059.

060.

061.

062. #endregion

063.

064. #region Propiedades

065. public string currentColorFondo

066.

067. get return (string)(Session["currentColorFondo"] ??null);

068. set Session["currentColorFondo"] = value;

069.

070. public string currentColorBorde

071.

072. get return (string)(Session["currentColorBorde"] ??null);

073. set Session["currentColorBorde"] = value;

074.

075. public string currentLink

076.

077. get return (string)(Session["currentLink"] ??null);

078. set Session["currentLink"] = value;

079.

080.

081. #endregion

082. protected tubebesanocamEntities context = newtubebesanocamEntities();

083. protected void Page_Load(object sender, EventArgs e)

084.

085. try

086.

087. #region Eliminacion de tramos

088.

089.

090. if (Mode == AdminControlMode.Delete)

091.

092. lblError.Text = string.Empty;

093. var tramoD = context.mn_Tramo.Where(t => t.IdTramo == IdTramo).FirstOrDefault();

094. if (tramoD == null) return;

095.

096. context.DeleteObject(tramoD);

097. context.SaveChanges();

098. Response.Redirect(ResolveUrl(SiteMapBase.GetActualCurrentNode().ParentNode.Url));

099. return;

100.

101.

102. #endregion

103.

104. if (Mode == AdminControlMode.Edit)

105.

106. var tramo = context.mn_Tramo.Where(t => t.IdTramo == IdTramo).FirstOrDefault();

107. if (tramo == null) return;

108.

109. if (!Page.IsPostBack)

110.

111. this.txtNombreTramo.Text = tramo.NombreTramo;

112. this.txtEdadDesde.Text = tramo.MesDesde.ToString();

113. this.txtEdadHasta.Text = tramo.MesHasta.ToString();

114. if(!currentColorBorde.IsNullOrEmpty())

115. this.PickerColorBorde.SelectedColor = ColorTranslator.FromHtml(currentColorBorde);

116. if(!currentColorFondo.IsNullOrEmpty())

117. this.PickerColorFondo.SelectedColor = ColorTranslator.FromHtml(currentColorFondo);

118. //if (!THIS.IsNullOrEmpty())

119.

120.

121.

122. CargarArbol();

123.

124. catch (Exception ex)

125.

126. ex = null;

127.

128.

129. private void CargarArbol()

130.

131. foreach (SiteMapNode nodo_0 inSiteMap.RootNode.GetAllNodes())

132.

133. try

134.

135. PageSiteNode pageNode_0 = (PageSiteNode)nodo_0;

136. RadTreeNode nodetree_0 = newRadTreeNode();

137.

138. nodetree_0.Text = pageNode_0.Title;

139. nodetree_0.Value = pageNode_0.Id.ToString();

140. nodetree_0.Category = pageNode_0.Url;

141.

142. if (!currentLink.IsNullOrEmpty())

143.

144. if (currentLink == pageNode_0.Url)

145. nodetree_0.Selected = true;

146.

147. treeHome.Nodes.Add(nodetree_0);

148.

149. if (nodo_0.HasChildNodes)

150.

151. foreach (SiteMapNode nodo_1 innodo_0.ChildNodes)

152.

153. PageSiteNode pageNode_1 = (PageSiteNode)nodo_1;

154. RadTreeNode nodetree_1 = newRadTreeNode();

155.

156. nodetree_1.Text = pageNode_1.Title;

157. nodetree_1.Value = pageNode_1.Id.ToString();

158. nodetree_1.Category = pageNode_1.Url;

159.

160. if(!currentLink.IsNullOrEmpty())

161.

162. if (currentLink == pageNode_1.Title)

163. nodetree_1.Selected = true;

164.

165. nodetree_0.Nodes.Add(nodetree_1);

166.

167. if (nodo_1.HasChildNodes)

168.

169. foreach (SiteMapNode nodo_2 in nodo_1.ChildNodes)

170.

171. PageSiteNode pageNode_2 = (PageSiteNode)nodo_2;

172. RadTreeNode nodetree_2 = new RadTreeNode();

173.

174. nodetree_2.Text = pageNode_2.Title;

175. nodetree_2.Value = pageNode_2.Id.ToString();

176. nodetree_2.Category = pageNode_2.Url;

177.

178. if(!currentLink.IsNullOrEmpty())

179.

180. if (currentLink == pageNode_2.Title)

181. nodetree_2.Selected = true;

182.

183. nodetree_1.Nodes.Add(nodetree_2);

184.

185.

186.

187.

188.

189.

190. catch (Exception ex)

191.

192. throw (ex);

193.

194.

195.

196.

197. protected void btnSave_Click(object sender, EventArgs e)

198.

199. int tram = 0;

200. bool IsValid = true;

201. try

202.

203. switch (Mode)

204.

205. case AdminControlMode.Edit:

206. var tramo = context.mn_Tramo.Where(t => t.IdTramo == IdTramo).FirstOrDefault();

207. if (tramo == null) return;

208. tramo.NombreTramo =this.txtNombreTramo.Text.Trim();

209. tramo.MesDesde = Convert.ToInt16(this.txtEdadDesde.Text);

210. tramo.MesHasta = Convert.ToInt16(this.txtEdadHasta.Text);

211. tramo.ColorBorde =this.currentColorBorde;

212. tramo.ColorFondo =this.currentColorFondo;

213. break;

214.

215. case AdminControlMode.Create:

216.

217.

218. // guardamos el producto

219. var newTramo = newSitefinityWebApp.Data.mn_Tramo();

220. newTramo.NombreTramo = txtNombreTramo.Text.Trim();

221. newTramo.ColorBorde =this.currentColorBorde;

222. newTramo.ColorFondo =this.currentColorFondo;

223.

224. if(!txtEdadDesde.Text.IsNullOrEmpty())

225.

226. if(!txtEdadHasta.Text.IsNullOrEmpty())

227.

228. if(Convert.ToInt16(txtEdadHasta.Text) <= Convert.ToInt16(txtEdadDesde.Text))

229.

230. lblError.Text = "La fecha hasta no puede ser menor que la fecha desde";

231. IsValid = false;

232.

233. else

234.

235. lblError.Text =string.Empty;

236. newTramo.MesDesde = Convert.ToInt16(txtEdadDesde.Text);

237. newTramo.MesHasta = Convert.ToInt16(txtEdadHasta.Text);

238.

239.

240.

241. context.AddTomn_Tramo(newTramo);

242. tram = newTramo.IdTramo;

243.

244. break;

245.

246. if (IsValid)

247.

248. // save and return to main view

249. context.SaveChanges();

250. Response.Redirect(ResolveUrl(SiteMapBase.GetActualCurrentNode().ParentNode.Url));

251.

252.

253. catch (Exception ex)

254.

255. ex = null;

256. lblError.Text = string.Empty;

257.

258.

259. protected void PickerColorFondo_ColorChanged(objectsender, EventArgs e)

260.

261. currentColorFondo = ColorTranslator.ToHtml(PickerColorFondo.SelectedColor);

262.

263. protected void PickerColorBorde_ColorChanged(objectsender, EventArgs e)

264.

265. currentColorBorde = ColorTranslator.ToHtml(PickerColorBorde.SelectedColor);

266.

267. protected void treeHome_NodeClick(object sender, RadTreeNodeEventArgs e)

268.

269. this.lblError.Text = string.Empty;

270.

271.

272. if (!e.Node.Text.IsNullOrEmpty())

273.

274. this.currentLink = e.Node.Text;

275.

276.

277.

278.

ImageControlDesigner.js

Type.registerNamespace("SitefinityWebApp.UserControls.ImageSelector");

Type.registerNamespace("Telerik.Sitefinity.Web.UI.ControlDesign");

SitefinityWebApp.UserControls.ImageSelector.ImageControlDesigner = function (element)

SitefinityWebApp.UserControls.ImageSelector.ImageControlDesigner.initializeBase(this, [element]);

SitefinityWebApp.UserControls.ImageSelector.ImageControlDesigner.prototype =

initialize: function ()

SitefinityWebApp.UserControls.ImageSelector.ImageControlDesigner.callBaseMethod(this , 'initialize' );

this ._itemSelectDelegate = Function.createDelegate( this , this ._itemSelect);

this .add_onItemSelectCommand( this ._itemSelectDelegate);

alert("callBaseMethod");

dispose: function ()

SitefinityWebApp.UserControls.ImageSelector.ImageControlDesigner.callBaseMethod(this,'dispose');

if ( this ._selectorView)

this ._selectorView.add_onItemSelectCommand( this ._itemSelectDelegate);

alert("_selectorView");

get_selectorView: function ()

return this ._selectorView;

alert("get_selectorView");

set_selectorView: function (value)

this ._selectorView = value;

alert("set_selectorView");

_itemSelect: function (sender, args)

var dataItem = args.get_dataItem();

alert("_itemSelect");

refreshUI: function ()

var data = this ._propertyEditor.get_control();

alert("refreshUI");

// Something goes here to set the image selector 'selectorView' to the selected image

applyChanges: function ()

var controlData = this ._propertyEditor.get_control();

alert("applyChanges");

// Something goes here to save the image selected from 'selectorView' and pass it to the control.

add_onItemSelectCommand: function (delegate)

this .get_events().addHandler( 'onItemSelectCommand' , delegate);

alert("add_onItemSelectCommand");

SitefinityWebApp.UserControls.ImageSelector.ImageControlDesignerTemplate.registerClass('SitefinityWebApp.UserControls.ImageSelector.ImageControlDesignerTemplate', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase); //

if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

Class: ImageControlDesigner.cs

01.using System.Collections.Generic;

02.using System.Web.UI;

03.using System.Linq;

04.using System.Web.UI.WebControls;

05.using Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers;

06.using Telerik.Sitefinity.Web.UI.ControlDesign;

07.using Telerik.Web.UI;

08.using Telerik.Sitefinity.Web.UI.Fields;

09.

10.namespace SitefinityWebApp.UserControls.ImageSelector

11.

12.

13. public class ImageControlDesigner : ControlDesignerBase

14.

15. private const string designerScriptName ="UserControls.ImageSelector.ImageControlDesigner.js";

16. protected override voidInitializeControls(Telerik.Sitefinity.Web.UI.GenericContainer container)

17.

18. base.DesignerMode = ControlDesignerModes.Simple;

19.

20.

21. protected override string LayoutTemplateName

22.

23. get

24.

25. return "/Nestle" +"/UserControls.ImageSelector.ImageControlDesignerTemplate.ascx";

26.

27.

28.

29. public override IEnumerable<ScriptDescriptor> GetScriptDescriptors()

30.

31. var scriptDescriptors = new List<ScriptDescriptor>(base.GetScriptDescriptors());

32. var desc = (ScriptControlDescriptor)scriptDescriptors.Last();

33. desc.AddComponentProperty("selectorView", SelectorView.ClientID);

34. return scriptDescriptors.ToArray();

35.

36.

37. public override IEnumerable<System.Web.UI.ScriptReference> GetScriptReferences()

38.

39. var res = new List<ScriptReference>(base.GetScriptReferences());

40. var assemblyName = this.GetType().Assembly.GetName().ToString();

41. res.Add(new ScriptReference(designerScriptName, assemblyName));

42. return res.ToArray();

43.

44.

45. protected MediaContentSelectorView MediaSelector

46.

47. get

48.

49. return Container.GetControl<MediaContentSelectorView>("selectorView", true);

50.

51.

52.

53. protected virtual MediaContentSelectorView SelectorView

54.

55. get

56.

57. return this.Container.GetControl<MediaContentSelectorView>("selectorView", true);

58.

59.

60.

61.

ImageControlDesignerTemplate.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ImageControlDesignerTemplate.ascx.cs" Inherits="SitefinityWebApp.UserControls.ImageSelector.ImageControlDesignerTemplate" %>

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sfFields" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sitefinity" %>

<%@ Register Assembly="Telerik.Sitefinity" TagPrefix="designers" Namespace="Telerik.Sitefinity.Web.UI.ControlDesign" %>

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers" TagPrefix="sf" %>

<%@ Register Assembly="Telerik.Sitefinity, Version=4.2.1650.0, Culture=neutral, PublicKeyToken=b28c218413bdf563" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sitefinity" %>

<sf:MediaContentSelectorView

id="selectorView"

runat="server"

ContentType="Telerik.Sitefinity.Libraries.Model.Image"

ParentType="Telerik.Sitefinity.Libraries.Model.Album"

LibraryBinderServiceUrl="~/Sitefinity/Services/Content/AlbumService.svc/"

MediaContentBinderServiceUrl="~/Sitefinity/Services/Content/ImageService.svc/"

MediaContentItemsListDescriptionTemplate="Telerik.Sitefinity.Resources.Templates.Designers.Libraries.Images.ImageItemDescriptionTemplate.htm"

DisplayResizingOptionsControl="false"

ShowOpenOriginalSizeCheckBox="false">

</sf:MediaContentSelectorView>

ImageControlDesignerTemplate.ascx.cs

01.using System;

02.using System.Text;

03.using System.Collections.Generic;

04.using System.Linq;

05.using System.Web;

06.using System.Web.UI;

07.using System.Web.UI.WebControls;

08.using Telerik.Sitefinity.Web.UI;

09.using Telerik.Sitefinity.Web.UI.ControlDesign;

10.using Telerik.Sitefinity;

11.

12.

13.

14.namespace SitefinityWebApp.UserControls.ImageSelector

15.

16. public partial class ImageControlDesignerTemplate : System.Web.UI.UserControl

17.

18. protected void Page_Load(object sender, EventArgs e)

19.

20.

21.

22.

23.

Posted by Community Admin on 02-Oct-2011 00:00

Hi F_E_R_S,

I suggest you use EditorContentManagerDialog instead of MediaContentSelectorView.

To open a dialog in Sitefinity it should be called in RadWindow. Here is a sample of the window that calls EditorContentManagerDialog

<telerik:RadWindowManager ID="windowManager" runat="server" Skin="Sitefinity">

<Windows>

<telerik:RadWindow ID="simpleImageSelector" Width="600" Height="400" NavigateUrl="~/Sitefinity/Dialog/ImageSelectorDialog" runat="server" ReloadOnShow="true"

Modal="true" VisibleStatusbar="false" Behaviors="Close" OnClientClose="windowClose" OpenerElementID="selectBtn" >

</telerik:RadWindow>

</Windows>

</telerik:RadWindowManager>

Here is the code file that calls the dialog, note it inherits from AjaxDialogBase to properly call a dialog and persist selection. The code file calls the layout template for the dialog and related javascript file with dialog functionality.

using System;

using System.Collections.Generic;

using System.Web.UI;

using Telerik.Sitefinity.Web.UI;

using System.Linq;

using System.Web.UI.WebControls;

using Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers;

using Telerik.Sitefinity.Localization;

using Telerik.Sitefinity.Modules.Libraries.Images;

namespace SomeModule

/// <summary>

/// A simple dialog used to select an image. This dialog uses the SimpleImageSelector control

/// </summary>

public class ImageSelectorDialog : AjaxDialogBase

#region Properties

/// <summary>

/// Gets the name of the layout template.

/// </summary>

/// <value>The name of the layout template.</value>

protected override string LayoutTemplateName

get

return String.Empty;

public override string LayoutTemplatePath

get

return "~/Ctrls/SomeModule.Resources.Views.ImageSelectorDialog.ascx";

set

base.LayoutTemplatePath = value;

protected virtual EditorContentManagerDialog AsyncImageSelector

get

return this.Container.GetControl<EditorContentManagerDialog>("asyncImageSelector", true);

#endregion

#region Methods

/// <summary>

/// Initializes the controls.

/// </summary>

/// <param name="container">The container.</param>

protected override void InitializeControls(GenericContainer container)

#endregion

#region IScriptControl Members

/// <summary>

/// Gets the script references.

/// </summary>

/// <returns></returns>

public override IEnumerable<ScriptReference> GetScriptReferences()

var references = new List<ScriptReference>(base.GetScriptReferences());

var newRef = new ScriptReference(simpleImageSelectorDialogScript, this.GetType().Assembly.FullName);

references.Add(newRef);

return references;

/// <summary>

/// Gets the script descriptors.

/// </summary>

/// <returns></returns>

public override IEnumerable<ScriptDescriptor> GetScriptDescriptors()

var descriptor = (ScriptControlDescriptor)base.GetScriptDescriptors().Last();

descriptor.Type = this.GetType().FullName;

//var newDescriptor = new ScriptControlDescriptor(this.GetType().FullName, this.ClientID);

descriptor.AddComponentProperty("asyncImageSelector", this.AsyncImageSelector.ClientID);

//baseDescriptors.Add(newDescriptor);

return new[] descriptor ;

#endregion

#region Private Fields

private const string simpleImageSelectorDialogScript = "SomeModule.Resources.Scripts.ImageSelectorDialog.js";

#endregion

The embedded template. Note DialogMode propery can be set to upload/select image or document

<%@ Control Language="C#" %>

<%@ Register Assembly="Telerik.Sitefinity" TagPrefix="media" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sfFields" %>

<sf:ResourceLinks id="resourcesLinks" runat="server" UseEmbeddedThemes="True" Theme="Default">

<sf:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.jquery-ui-1.8.8.custom.min.js"></sf:ResourceFile>

<sf:ResourceFile Name="Telerik.Sitefinity.Resources.Themes.Default.Styles.jQuery.jquery.ui.core.css" Static="True"/>

<sf:ResourceFile Name="Telerik.Sitefinity.Resources.Themes.Default.Styles.jQuery.jquery.ui.dialog.css" Static="True"/>

<sf:ResourceFile Name="Telerik.Sitefinity.Resources.Themes.Default.Styles.jQuery.jquery.ui.theme.sitefinity.css" Static="True"/>

</sf:ResourceLinks>

<div class="sfDesignerSelector">

<sf:EditorContentManagerDialog runat="server" ID="asyncImageSelector" DialogMode="Image" Width="540" HostedInRadWindow="true" BodyCssClass="" />

<sfFields:FormManager id="formManager" runat="server"/>

</div>

embedded javascript file.

Type.registerNamespace("SomeModule.Controls");

SomeModule.Controls.ImageSelectorDialog = function (element)

SomeModule.Controls.ImageSelectorDialog.initializeBase(this, [element]);

this._asyncImageSelector = null;

this._asyncImageSelectorInsertDelegate = null;

SomeModule.Controls.ImageSelectorDialog.prototype =

initialize: function ()

SomeModule.Controls.ImageSelectorDialog.callBaseMethod(this, "initialize");

// this._asyncImageSelector.get_selectorView().

// get_mediaContentBinder()

// .set_filterExpression(query)

this._asyncImageSelectorInsertDelegate = Function.createDelegate(this, this._asyncImageSelectorInsertHandler);

this._asyncImageSelector.set_customInsertDelegate(this._asyncImageSelectorInsertDelegate);

this._loadDelegate = Function.createDelegate(this, this._load);

Sys.Application.add_load(this._loadDelegate);

dialogBase.resizeToContent();

,

_load: function ()

var key = "B6F45EE2-45C8-4BB6-8AC6-358B110BBDA2";

var filter = "Id=(" + key + ")";

this._asyncImageSelector.get_selectorView().get_libraryBinder().set_filterExpression(filter);

// var urlParams = []

// urlParams["ParentId"] = "B6F45EE2-45C8-4BB6-8AC6-358B110BBDA2";

// this._asyncImageSelector.get_selectorView().get_libraryBinder().set_urlParams(urlParams);

,

dispose: function ()

SomeModule.Controls.ImageSelectorDialog.callBaseMethod(this, "dispose");

//todo remove load delegate

,

/* -------------------- public methods ----------- */

/* -------------------- events -------------------- */

/* -------------------- event handlers ------------ */

_asyncImageSelectorInsertHandler: function (selectedItem)

if (selectedItem)

// this.get_imageElement().src = selectedItem.ThumbnailUrl;

// this._selectedImageItem = selectedItem;

dialogBase.close(selectedItem);

,

/* -------------------- private methods ----------- */

/* -------------------- properties ---------------- */

get_asyncImageSelector: function ()

return this._asyncImageSelector;

,

set_asyncImageSelector: function (value)

this._asyncImageSelector = value;

;

SomeModule.Controls.ImageSelectorDialog.registerClass("SomeModule.Controls.ImageSelectorDialog", Telerik.Sitefinity.Web.UI.AjaxDialogBase);

The embedded .js file must be registered in AssemblyInfo.cs

[assembly: WebResource("Modules.Competition.Resources.Scripts.ImageSelectorDialog.js", "application/x-javascript")]

I have attached Global.asax file that calls the dialog. Place it in the root of your project.

All the best,
Stanislav Velikov
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

This thread is closed