How call EditPropertyDialog to insert images from the gallery from a module?? - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

How call EditPropertyDialog to insert images from the gallery from a module??

  • How call EditPropertyDialog to insert images from the gallery from a module??
  • 302790_sitefinity-error.JPG
    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>--%>
    <script src="../../../UserControls/ImageSelector/ImageControlDesigner.js"type="text/javascript"></script>
    <script src="../../../App_Themes/tubebesanocam/Script/jquery.callers.js"type="text/javascript"></script>
     
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <fieldset class="sfNewContentForm">
        <h1 style="padding-bottom: 15px;">
            Tramos</h1>
        <div class="sfClearfix">
            <div class="sfMainLangVersionWrp">
                <div class="sfForm sfExpandedForm sfFirstForm">
                    <div class="sfFormIn">
                        <div class="sfExpandedTarget">
                            <ul>
                                <li class="sfTitle">
                                    <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>
                                <li class="sfTitle">
                                    <asp:Label ID="lblEdad"runat="server" Text="Edad (N° de meses)" CssClass="sfTxtLbl" />
                                </li>
                                <li class="sfTitle">
                                    <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>
                                <li class="sfTitle">
                                    <asp:Label ID="lblError"ForeColor="Red" runat="server" Text=""></asp:Label>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="sfButtonArea sfMainFormBtns">
            <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 == nullreturn;
    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 == nullreturn;
    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 == nullreturn;
    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.
     
     
  • 303803_Asax.rar
    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 >>