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

Forums / General Discussions / how to add dropdown list on the edit properties of a custom usercontrol

how to add dropdown list on the edit properties of a custom usercontrol

2 posts, 0 answered
  1. sreeraj
    sreeraj avatar
    14 posts
    Registered:
    24 Aug 2011
    21 Feb 2012
    Link to this post
    Hi
       I am using sitefinity 4.x, I want to  add  dropdown list on the edit properties of a custom usercontrol.



    Thanks.
  2. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    21 Feb 2012
    Link to this post
    Hi sreeraj,

    You'll have to create a designer for your usercontrol.
    Here's an example:

    DesignerControl.ascx
    Create a usercontrol with the following markup (just create a new item, choose for a class, rename the file to .ascx and replace the content)

    <%@ Control Language="C#" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields"
        TagPrefix="sf" %>
    <sitefinity:FormManager ID="formManager" runat="server" />
    <!-- show the image preview as a thumbnail -->
    <style type="text/css">
        #Options li {
            display: block;
            margin: 0 0 10px;
            padding: 0 0 10px;
            border-bottom: 1px solid #e6e6e6;
        }
        img {
            height: 50px !important;
            margin: 5px 5px 5px 0px;
        }
         
        .sfExample {
            color: #666666;
            font-size: 11px;
            line-height: 1.2;
            padding-bottom: 5px;
            padding-top: 5px;
            display:block;
        }
    </style>
    <div class="sfContentViews">
        <h2>
            Select pagelink:
        </h2>
        <sf:PageField ID="PageSelector" runat="server" WebServiceUrl="~/Sitefinity/Services/Pages/PagesService.svc/"
            DisplayMode="Write" />
        <span class="sfExample">Set the project page for this website. </span>
        <h2>
            Select a project:
        </h2>
        <asp:DropDownList ID="ProjectSelector" Width="100%" CssClass="sfTxt" runat="server" ClientIDMode="Static">
        </asp:DropDownList>
        <span class="sfExample">Select a project to highlight on the page. </span>
        <h2>
            Select an image:
        </h2>
        <sitefinity:ImageField ID="ImageSelector" runat="server" DisplayMode="Write" UploadMode="Dialog"
            DataFieldName="Image" />
        <span class="sfExample">Select an image. </span>
    </div>

    DesignerControl.cs
    Next, create a class and use the following code:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using Projects.Data;
    using Telerik.Sitefinity.Web.UI.ControlDesign;
    using Telerik.Sitefinity.Web.UI.Fields;
     
    namespace SitefinityWebApp.Custom.Projects.Highlight {
        public class HighlightedProjectDesigner : ControlDesignerBase {
     
            protected class Project {
                public Guid Id { get; set; }
                public string Title { get; set; }
     
                public Project(Guid id, string title) {
                    this.Id = id;
                    this.Title = title;
                }
            }
     
            /// <summary>
            /// Initializes the controls.
            /// </summary>
            /// <param name="container"></param>
            protected override void InitializeControls(Telerik.Sitefinity.Web.UI.GenericContainer container) {
     
     
                // load in simple mode
                base.DesignerMode = ControlDesignerModes.Simple;
     
                // set root node for page selector
                PageSelector.RootNodeID = Telerik.Sitefinity.Abstractions.SiteInitializer.FrontendRootNodeId;
     
                // set the image selector type to use string (src)
                ImageSelector.DataFieldType = typeof(Guid);
     
                // Current culture
                string currentCulture = HttpContext.Current.Request.QueryString["propertyValueCulture"].ToString();
     
                // Projects
                var projects = ProjectsManager.GetManager()
                    .GetProjects()
                    .Where(x => (x.Status == Telerik.Sitefinity.GenericContent.Model.ContentLifecycleStatus.Live &&
                        x.PublishedTranslations.Contains(currentCulture)));
     
                List<Project> items = new List<Project>();
                foreach (var p in projects) {
                    items.Add(new Project(p.Id, p.Title[currentCulture]));
                }
     
                ProjectSelector.DataSource = items;
                ProjectSelector.DataValueField = "Id";
                ProjectSelector.DataTextField = "Title";
                ProjectSelector.DataBind();
            }
     
            /// <summary>
            /// Gets the page selector.
            /// </summary>
            protected PageField PageSelector {
                get { return Container.GetControl<PageField>("PageSelector", true); }
            }
     
            /// <summary>
            /// Gets the image selector.
            /// </summary>
            protected ImageField ImageSelector {
                get { return Container.GetControl<ImageField>("ImageSelector", true); }
            }
     
            /// <summary>
            /// Gets the project selector.
            /// </summary>
            protected System.Web.UI.WebControls.DropDownList ProjectSelector {
                get { return Container.GetControl<System.Web.UI.WebControls.DropDownList>("ProjectSelector", true); }
            }
     
            /// <summary>
            /// Gets or sets the path of the external template to be used by the control.
            /// </summary>
            public override string LayoutTemplatePath {
                get { return _layoutTemplatePath; }
                set { _layoutTemplatePath = value; }
            }
     
            /// <summary>
            /// Gets or sets the designer script path.
            /// </summary>
            /// <value>
            /// The designer script path.
            /// </value>
            public string DesignerScriptPath {
                get { return _scriptPath; }
                set { _scriptPath = value; }
            }
     
            /// <summary>
            /// Gets the name of the embedded layout template.
            /// </summary>
            protected override string LayoutTemplateName {
                get { return null; }
            }
     
            /// <summary>
            /// Gets a collection of <see cref="T:System.Web.UI.ScriptReference"/> objects that define script resources that the control requires.
            /// </summary>
            /// <returns>
            /// An <see cref="T:System.Collections.IEnumerable"/> collection of <see cref="T:System.Web.UI.ScriptReference"/> objects.
            /// </returns>
            public override IEnumerable<ScriptReference> GetScriptReferences() {
                var scripts = base.GetScriptReferences() as List<ScriptReference>;
                if (scripts == null) return base.GetScriptReferences();
     
                scripts.Add(new ScriptReference(DesignerScriptPath));
                return scripts.ToArray();
            }
     
            /// <summary>
            /// Gets a collection of script descriptors that represent ECMAScript (JavaScript) client components.
            /// </summary>
            /// <returns>
            /// An <see cref="T:System.Collections.IEnumerable"/> collection of <see cref="T:System.Web.UI.ScriptDescriptor"/> objects.
            /// </returns>
            public override IEnumerable<ScriptDescriptor> GetScriptDescriptors() {
                var descriptors = new List<ScriptDescriptor>(base.GetScriptDescriptors());
                var descriptor = (ScriptControlDescriptor)descriptors.Last();
                descriptor.AddComponentProperty("PageSelector", this.PageSelector.ClientID);
                descriptor.AddComponentProperty("ImageSelector", this.ImageSelector.ClientID);
                //descriptor.AddComponentProperty("ProjectSelector", this.ProjectSelector.ClientID);
                return descriptors;
            }
     
            private string _layoutTemplatePath = "~/Custom/Projects/Highlight/HighlightedProjectDesigner.ascx";
            private string _scriptPath = "~/Custom/Projects/Highlight/HighlightedProjectDesigner.js";
        }
    }

    DesignerControl.js
    Create a javascript file with the following code:
    Type.registerNamespace("SitefinityWebApp.Custom.Projects.Highlight.HighlightedProject");
     
    SitefinityWebApp.Custom.Projects.Highlight.HighlightedProjectDesigner = function (element) {
        SitefinityWebApp.Custom.Projects.Highlight.HighlightedProjectDesigner.initializeBase(this, [element]);
     
        this._PageSelector = null;
        this._ImageSelector = null;
        this._resizeControlDesignerDelegate = null;
    }
     
     
    SitefinityWebApp.Custom.Projects.Highlight.HighlightedProjectDesigner.prototype = {
         
        initialize: function () {
            SitefinityWebApp.Custom.Projects.Highlight.HighlightedProjectDesigner.callBaseMethod(this, 'initialize');
            this._handlePageLoadDelegate = Function.createDelegate(this, this._handlePageLoad);
            Sys.Application.add_load(this._handlePageLoadDelegate);
        },
        _handlePageLoad: function (sender, args) {
            //debugger;
            // var url = window.location.pathname;
            //var name = url.substring(url.lastIndexOf('/') + 1);
            var my_href = window.location.href;
            var propertyValueCulturePosition = my_href.search(/propertyValueCulture/i);
            var pageCulture = my_href.slice(propertyValueCulturePosition + 21, propertyValueCulturePosition + 23);
            //var currentCulture = Sys.CultureInfo.CurrentCulture.name;
            this.get_PageSelector().get_pageSelector()._setCultures(pageCulture);
            // this.get_PageSelector().get_pageSelector().set_uiCulture(currentCulture);
        },
        dispose: function () {
            SitefinityWebApp.Custom.Projects.Highlight.HighlightedProjectDesigner.callBaseMethod(this, 'dispose');
        },
        refreshUI: function () {
            var data = this._propertyEditor.get_control();
     
            this.resizeEvents();
     
            // load image src
            var i = this.get_ImageSelector();
            var imageid = data.SelectedImageSrc;
            if (imageid) i.set_value(imageid);
     
            // load selected page
            var p = this.get_PageSelector();
            var pageid = data.SelectedPageID;
            if (pageid) p.set_value(pageid);
     
            // load selected project
            jQuery("#ProjectSelector").val(data.SelectedProjectID);
        },
        applyChanges: function () {
     
            // save selected page
            var controlData = this._propertyEditor.get_control();
            controlData.SelectedPageID = this.get_PageSelector().get_value();
     
            // save selected image
            var i = this.get_ImageSelector();
            controlData.SelectedImageSrc = i.get_value();
     
            // save selected project
            controlData.SelectedProjectID = jQuery("#ProjectSelector").val();
        },
     
        // add resize events
        resizeEvents: function () {
            // resize on Page Select
            var s = this.get_PageSelector();
            s.add_selectorOpened(this._resizeControlDesigner);
            s.add_selectorClosed(this._resizeControlDesigner);
     
            // resize control designer on image selector load
            var i = this.get_ImageSelector();
            this._resizeControlDesignerDelegate = Function.createDelegate(this, this._resizeControlDesigner);
            $addHandler(i._replaceImageButtonElement, "click", this._resizeControlDesignerDelegate);
     
            // resize control designer on image selector mode toggle
            var d = i._asyncImageSelector._dialogModesSwitcher;
            d.add_valueChanged(this._resizeControlDesigner);
     
            // resize control designer on image selector cancel
            var a = i._asyncImageSelector._cancelLink;
            $addHandler(a, "click", this._resizeControlDesignerDelegate);
     
            // resize control designer on image selector save
            var s = i._asyncImageSelector._saveLink;
            $addHandler(s, "click", this._resizeControlDesignerDelegate);
     
            // resize control designer on image upload
            i._asyncImageSelector.get_uploaderView().add_onFileUploaded(this._resizeControlDesigner);
        },
     
     
        // Page Selector
        get_PageSelector: function () {
            return this._PageSelector;
        },
        set_PageSelector: function (value) {
            this._PageSelector = value;
        },
     
        // Image Selector
        get_ImageSelector: function () {
            return this._ImageSelector;
        },
        set_ImageSelector: function (value) {
            this._ImageSelector = value;
        },
     
        // function to initialize resizer methods and handlers
        _resizeControlDesigner: function () {
            setTimeout("dialogBase.resizeToContent()", 100);
        }
    }
     
    SitefinityWebApp.Custom.Projects.Highlight.HighlightedProjectDesigner.registerClass('SitefinityWebApp.Custom.Projects.Highlight.HighlightedProjectDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);
    if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

    Control.ascx.cs
    Finally decorate your control to make use of the designer:
    [ControlDesigner(typeof(HighlightedProjectDesigner))]
        public partial class HighlightedProject : System.Web.UI.UserControl {
     
            #region Properties
            /// <summary>
            /// Gets or sets the url to the selected image
            /// </summary>
            /// <value>
            /// The selected image url.
            /// </value>
            [MultilingualProperty]
            public string SelectedImageSrc { get; set; }
     
            /// <summary>
            /// Gets or sets the ID of the selected page.
            /// </summary>
            /// <value>
            /// The selected page ID.
            /// </value>
            [MultilingualProperty]
            public Guid SelectedPageID { get; set; }
     
            /// <summary>
            /// Gets or sets the ID of the selected project.
            /// </summary>
            [MultilingualProperty]
            public Guid SelectedProjectID { get; set; }

    And of course create the public properties to where you want to store the selected value of your DropDownList.
    The above example has a DropDownList, a PageSelector and an ImageSelector.

    If you have any questions, let me know.

    Have fun,
    Daniel
2 posts, 0 answered