+1-888-365-2779
Try Now
More in this section

Forums / Sitefinity SDK / How call EditPropertyDialog to insert images from the gallery from a module??

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

2 posts, 0 answered
  1. F_E_R_S
    F_E_R_S avatar
    3 posts
    Registered:
    30 Mar 2011
    27 Sep 2011
    Link to this post

    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.}

     

     

  2. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    22 Sep 2016
    02 Oct 2011
    Link to this post
    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 >>

2 posts, 0 answered