how to add dropdown list on the edit properties of a custom - Sitefinity - General Discussions

All Replies

Posted by Community Admin on 21-Feb-2012 00:00

Hi
I am using sitefinity 4.x, I want to add dropdown list on the edit properties of a custom usercontrol.

Thanks.

Posted by Community Admin on 21-Feb-2012 00:00

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" />

<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

This thread is closed