How to create a Multiple Image Selector Widget

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

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

<asp:Panel ID="UspWrp" runat="server">

<asp:Repeater ID="UspImageSelector" runat="server">

<ItemTemplate>

<asp:Image ID="UspImage" runat="server"/>

<asp:Label ID="UspMessage" runat="server" />

</ItemTemplate>

</asp:Repeater>

</asp:Panel>

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Sitefinity.Modules.Libraries;

using Telerik.Sitefinity.Web.UI;

using Telerik.Sitefinity.Web.UI.Fields;

using Telerik.Web.UI;

namespace SitefinityWebApp.Widgets.UspItem

/// <summary>

/// Class used to create custom page widget

/// </summary>

/// <remarks>

/// If this widget is a part of a Sitefinity module,

/// you can register it in the site's toolbox by adding this to the module's Install/Upgrade method(s):

/// initializer.Installer

/// .Toolbox(CommonToolbox.PageWidgets)

/// .LoadOrAddSection(SectionName)

/// .SetTitle(SectionTitle) // When creating a new section

/// .SetDescription(SectionDescription) // When creating a new section

/// .LoadOrAddWidget<UspItem>("UspItem")

/// .SetTitle("UspItem")

/// .SetDescription("UspItem")

/// .LocalizeUsing<ModuleResourceClass>() //Optional

/// .SetCssClass(WidgetCssClass) // You can use a css class to add an icon (Optional)

/// .Done()

/// .Done();

/// </remarks>

/// <see cref="http://www.sitefinity.com/documentation/documentationarticles/user-guide/widgets"/>

[Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesigner(typeof(SitefinityWebApp.Widgets.UspItem.Designer.UspItemDesigner))]

public class UspItem : SimpleView

#region Properties

/// <summary>

/// Gets or sets the Usp Image and associated properties

/// </summary>

public Guid UspItemImage get; set;

/// <summary>

/// Obsolete. Use LayoutTemplatePath instead.

/// </summary>

protected override string LayoutTemplateName

get

return string.Empty;

/// <summary>

/// Gets the layout template's relative or virtual path.

/// </summary>

public override string LayoutTemplatePath

get

if (string.IsNullOrEmpty(base.LayoutTemplatePath))

return UspItem.layoutTemplatePath;

return base.LayoutTemplatePath;

set

base.LayoutTemplatePath = value;

#endregion

#region Control References

/// <summary>

/// Reference to the Image Control.

/// </summary>

protected Image UspImageSelector

get

return this.Container.GetControl<Image>("UspImageSelector", true);

/// <summary>

/// Reference to the Image Control.

/// </summary>

protected virtual Label UspMessageCr

get

return this.Container.GetControl<Label>("UspMessage", true);

#endregion

#region Methods

/// <summary>

/// Initializes the controls.

/// </summary>

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

/// <remarks>

/// Initialize your controls in this method. Do not override CreateChildControls method.

/// </remarks>

protected override void InitializeControls(GenericContainer container)

LibrariesManager librariesManager = LibrariesManager.GetManager();

if (UspItemImage != Guid.Empty)

var image = librariesManager.GetImage(UspItemImage);

UspImageSelector.ImageUrl = image.MediaUrl;

UspImageSelector.AlternateText = image.AlternativeText;

UspMessageCr.Text = image.AlternativeText;

#endregion

#region Private members & constants

public static readonly string layoutTemplatePath = "~/Widgets/UspItem/UspItem.ascx";

#endregion

<%@ Control %>

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

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

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

<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers" Assembly="Telerik.Sitefinity, Version=8.0.5700.0, Culture=neutral, PublicKeyToken=b28c218413bdf563" %>

<sitefinity:ResourceLinks ID="resourcesLinks" runat="server">

<sitefinity:ResourceFile Name="Styles/Ajax.css" />

<sitefinity:ResourceFile Name="Styles/jQuery/jquery.ui.core.css" />

<sitefinity:ResourceFile Name="Styles/jQuery/jquery.ui.dialog.css" />

<sitefinity:ResourceFile Name="Styles/jQuery/jquery.ui.theme.sitefinity.css" />

</sitefinity:ResourceLinks>

<div id="designerLayoutRoot" class="sfContentViews sfSingleContentView" style="max-height: 400px; overflow: auto; ">

<ol>

<li class="sfFormCtrl">

<asp:Label runat="server" CssClass="sfTxtLbl">Image Selector</asp:Label>

<sf:MediaContentSelectorView

ID="UspItemImage"

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.Resouorces.Templates.Designers.Libraries.Images.ImageItemDescriptionTemplate.htm"

DisplayResizingOptionsControl="true"

ShowOpenOriginalSizeCheckBox="true"

runat="server" >

</sf:MediaContentSelectorView>

<div>

<asp:LinkButton ID="selectButtonUspItemImage" OnClientClick="return false;" runat="server" CssClass="sfLinkBtn sfChange">

<span class="sfLinkBtnIn">

<asp:Literal runat="server" Text="<%$Resources:Labels, SelectDotDotDot %>" />

</span>

</asp:LinkButton>

<asp:LinkButton ID="deselectButtonUspItemImage" OnClientClick="return false;" runat="server" CssClass="sfLinkBtn sfChange">

<span class="sfLinkBtnIn">

<asp:Literal runat="server" Text="<%$Resources:Labels, Remove %>" />

</span>

</asp:LinkButton>

</div>

<sf:EditorContentManagerDialog runat="server" ID="selectorUspItemImage" DialogMode="Image" HostedInRadWindow="false" BodyCssClass="" />

<div class="sfExample">Select your USP images (Label is the Alternative Text</div>

</li>

</ol>

</div>

using System;

using System.Linq;

using System.Web.UI;

using Telerik.Sitefinity.Web.UI;

using Telerik.Sitefinity.Web.UI.ControlDesign;

using System.Collections.Generic;

using System.Web.UI.WebControls;

using System.Web;

using Telerik.Sitefinity.Localization;

using Telerik.Sitefinity.Modules.Pages;

namespace SitefinityWebApp.Widgets.UspItem.Designer

/// <summary>

/// Represents a designer for the <typeparamref name="SitefinityWebApp.Widgets.UspItem.UspItem"/> widget

/// </summary>

public class UspItemDesigner : ControlDesignerBase

#region Properties

/// <summary>

/// Obsolete. Use LayoutTemplatePath instead.

/// </summary>

protected override string LayoutTemplateName

get

return string.Empty;

/// <summary>

/// Gets the layout template's relative or virtual path.

/// </summary>

public override string LayoutTemplatePath

get

if (string.IsNullOrEmpty(base.LayoutTemplatePath))

return UspItemDesigner.layoutTemplatePath;

return base.LayoutTemplatePath;

set

base.LayoutTemplatePath = value;

protected override HtmlTextWriterTag TagKey

get

return HtmlTextWriterTag.Div;

#endregion

#region Control references

/// <summary>

/// The LinkButton for selecting UspItemImage.

/// </summary>

/// <value>The page selector control.</value>

protected internal virtual LinkButton SelectButtonUspItemImage

get

return this.Container.GetControl<LinkButton>("selectButtonUspItemImage", false);

/// <summary>

/// The LinkButton for deselecting UspItemImage.

/// </summary>

/// <value>The page selector control.</value>

protected internal virtual LinkButton DeselectButtonUspItemImage

get

return this.Container.GetControl<LinkButton>("deselectButtonUspItemImage", false);

/// <summary>

/// Gets the RadEditor Manager dialog for inserting image, document or video for the UspItemImage property.

/// </summary>

/// <value>The RadEditor Manager dialog for inserting image, document or video.</value>

protected EditorContentManagerDialog SelectorUspItemImage

get

return this.Container.GetControl<EditorContentManagerDialog>("selectorUspItemImage", false);

#endregion

#region Methods

protected override void InitializeControls(Telerik.Sitefinity.Web.UI.GenericContainer container)

// Place your initialization logic here

#endregion

#region IScriptControl implementation

/// <summary>

/// Gets a collection of script descriptors that represent ECMAScript (JavaScript) client components.

/// </summary>

public override System.Collections.Generic.IEnumerable<System.Web.UI.ScriptDescriptor> GetScriptDescriptors()

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

var descriptor = (ScriptControlDescriptor)scriptDescriptors.Last();

descriptor.AddElementProperty("selectButtonUspItemImage", this.SelectButtonUspItemImage.ClientID);

descriptor.AddElementProperty("deselectButtonUspItemImage", this.DeselectButtonUspItemImage.ClientID);

descriptor.AddComponentProperty("selectorUspItemImage", this.SelectorUspItemImage.ClientID);

descriptor.AddProperty("imageServiceUrl", this.imageServiceUrl);

return scriptDescriptors;

/// <summary>

/// Gets a collection of ScriptReference objects that define script resources that the control requires.

/// </summary>

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

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

scripts.Add(new ScriptReference(UspItemDesigner.scriptReference));

return scripts;

/// <summary>

/// Gets the required by the control, core library scripts predefined in the <see cref="ScriptRef"/> enum.

/// </summary>

protected override ScriptRef GetRequiredCoreScripts()

return ScriptRef.JQuery | ScriptRef.JQueryUI;

#endregion

#region Private members & constants

public static readonly string layoutTemplatePath = "~/Widgets/UspItem/Designer/UspItemDesigner.ascx";

public const string scriptReference = "~/Widgets/UspItem/Designer/UspItemDesigner.js";

private string imageServiceUrl = VirtualPathUtility.ToAbsolute("~/Sitefinity/Services/Content/ImageService.svc/");

#endregion

Type.registerNamespace("SitefinityWebApp.Widgets.UspItem.Designer");

SitefinityWebApp.Widgets.UspItem.Designer.UspItemDesigner = function (element)

/* Initialize UspItemImage fields */

this._selectButtonUspItemImage = null;

this._selectButtonUspItemImageClickDelegate = null;

this._deselectButtonUspItemImage = null;

this._deselectButtonUspItemImageClickDelegate = null;

this._selectorUspItemImageCloseDelegate = null;

this._selectorUspItemImageUploaderViewFileChangedDelegate = null;

this._UspItemImageDialog = null;

this._selectorUspItemImage = null;

this._UspItemImageId = null;

/* Initialize the service url for the image thumbnails */

this.imageServiceUrl = null;

/* Calls the base constructor */

SitefinityWebApp.Widgets.UspItem.Designer.UspItemDesigner.initializeBase(this, [element]);

SitefinityWebApp.Widgets.UspItem.Designer.UspItemDesigner.prototype =

/* --------------------------------- set up and tear down --------------------------------- */

initialize: function ()

/* Here you can attach to events or do other initialization */

SitefinityWebApp.Widgets.UspItem.Designer.UspItemDesigner.callBaseMethod(this, 'initialize');

/* Initialize UspItemImage */

this._selectButtonUspItemImageClickDelegate = Function.createDelegate(this, this._selectButtonUspItemImageClicked);

if (this._selectButtonUspItemImage)

$addHandler(this._selectButtonUspItemImage, "click", this._selectButtonUspItemImageClickDelegate);

this._deselectButtonUspItemImageClickDelegate = Function.createDelegate(this, this._deselectButtonUspItemImageClicked);

if (this._deselectButtonUspItemImage)

$addHandler(this._deselectButtonUspItemImage, "click", this._deselectButtonUspItemImageClickDelegate);

if (this._selectorUspItemImage)

this._UspItemImageDialog = jQuery(this._selectorUspItemImage.get_element()).dialog(

autoOpen: false,

modal: false,

width: 655,

height: "auto",

closeOnEscape: true,

resizable: false,

draggable: false,

zIndex: 5000,

close: this._selectorUspItemImageCloseDelegate

);

jQuery("#previewUspItemImage").load(function ()

dialogBase.resizeToContent();

);

this._selectorUspItemImageInsertDelegate = Function.createDelegate(this, this._selectorUspItemImageInsertHandler);

this._selectorUspItemImage.set_customInsertDelegate(this._selectorUspItemImageInsertDelegate);

$addHandler(this._selectorUspItemImage._cancelLink, "click", this._selectorUspItemImageCloseHandler);

this._selectorUspItemImageCloseDelegate = Function.createDelegate(this, this._selectorUspItemImageCloseHandler);

this._selectorUspItemImageUploaderViewFileChangedDelegate = Function.createDelegate(this, this._selectorUspItemImageUploaderViewFileChangedHandler);

,

dispose: function ()

/* this is the place to unbind/dispose the event handlers created in the initialize method */

SitefinityWebApp.Widgets.UspItem.Designer.UspItemDesigner.callBaseMethod(this, 'dispose');

/* Dispose UspItemImage */

if (this._selectButtonUspItemImage)

$removeHandler(this._selectButtonUspItemImage, "click", this._selectButtonUspItemImageClickDelegate);

if (this._selectButtonUspItemImageClickDelegate)

delete this._selectButtonUspItemImageClickDelegate;

if (this._deselectButtonUspItemImage)

$removeHandler(this._deselectButtonUspItemImage, "click", this._deselectButtonUspItemImageClickDelegate);

if (this._deselectButtonUspItemImageClickDelegate)

delete this._deselectButtonUspItemImageClickDelegate;

$removeHandler(this._selectorUspItemImage._cancelLink, "click", this._selectorUspItemImageCloseHandler);

if (this._selectorUspItemImageCloseDelegate)

delete this._selectorUspItemImageCloseDelegate;

if (this._selectorUspItemImageUploaderViewFileChangedDelegate)

this._selectorUspItemImage._uploaderView.remove_onFileChanged(this._selectorUspItemImageUploaderViewFileChangedDelegate);

delete this._selectorUspItemImageUploaderViewFileChangedDelegate;

,

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

findElement: function (id)

var result = jQuery(this.get_element()).find("#" + id).get(0);

return result;

,

/* Called when the designer window gets opened and here is place to "bind" your designer to the control properties */

refreshUI: function ()

var controlData = this._propertyEditor.get_control(); /* JavaScript clone of your control - all the control properties will be properties of the controlData too */

/* RefreshUI UspItemImage */

this.get_selectedUspItemImage().innerHTML = controlData.UspItemImage;

if (controlData.UspItemImage && controlData.UspItemImage != "00000000-0000-0000-0000-000000000000")

this.get_selectButtonUspItemImage().innerHTML = "<span class=\"sfLinkBtnIn\">Change</span>";

jQuery(this.get_deselectButtonUspItemImage()).show()

var url = this.imageServiceUrl + controlData.UspItemImage + "/?published=true";

jQuery.ajax(

url: url,

type: "GET",

contentType: "application/json",

dataType: "json",

success: function (data)

jQuery("#previewUspItemImage").show();

jQuery("#previewUspItemImage").attr("src", data.Item.ThumbnailUrl);

dialogBase.resizeToContent();

);

else

jQuery(this.get_deselectButtonUspItemImage()).hide()

,

/* Called when the "Save" button is clicked. Here you can transfer the settings from the designer to the control */

applyChanges: function ()

var controlData = this._propertyEditor.get_control();

/* ApplyChanges UspItemImage */

controlData.UspItemImage = this.get_selectedUspItemImage().innerHTML;

,

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

/* UspItemImage event handlers */

_selectButtonUspItemImageClicked: function (sender, args)

this._selectorUspItemImage._uploaderView.add_onFileChanged(this._selectorUspItemImageUploaderViewFileChangedDelegate);

this._UspItemImageDialog.dialog("open");

jQuery("#designerLayoutRoot").hide();

this._UspItemImageDialog.dialog().parent().css("min-width", "655px");

dialogBase.resizeToContent();

try

this._selectorUspItemImage.get_uploaderView().get_altTextField().set_value("");

catch (ex)

jQuery(this._selectorUspItemImage.get_uploaderView().get_settingsPanel()).hide();

return false;

,

_deselectButtonUspItemImageClicked: function (sender, args)

jQuery("#previewUspItemImage").hide();

jQuery("#previewUspItemImage").attr("src", "");

this.get_selectedUspItemImage().innerHTML = "00000000-0000-0000-0000-000000000000";

this.get_selectButtonUspItemImage().innerHTML = "<span class=\"sfLinkBtnIn\">Select...</span>";

jQuery(this.get_deselectButtonUspItemImage()).hide()

dialogBase.resizeToContent();

return false;

,

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

/* UspItemImage private methods */

_selectorUspItemImageInsertHandler: function (selectedItem)

if (selectedItem)

this._UspItemImageId = selectedItem.Id;

this.get_selectedUspItemImage().innerHTML = this._UspItemImageId;

jQuery(this.get_deselectButtonUspItemImage()).show()

this.get_selectButtonUspItemImage().innerHTML = "<span class=\"sfLinkBtnIn\">Change</span>";

jQuery("#previewUspItemImage").show();

jQuery("#previewUspItemImage").attr("src", selectedItem.ThumbnailUrl);

this._UspItemImageDialog.dialog("close");

jQuery("#designerLayoutRoot").show();

dialogBase.resizeToContent();

,

_selectorUspItemImageCloseHandler: function ()

if(this._UspItemImageDialog)

this._UspItemImageDialog.dialog("close");

jQuery("#designerLayoutRoot").show();

dialogBase.resizeToContent();

,

_selectorUspItemImageUploaderViewFileChangedHandler: function ()

dialogBase.resizeToContent();

,

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

/* UspItemImage properties */

get_selectorUspItemImage: function ()

return this._selectorUspItemImage;

,

set_selectorUspItemImage: function (value)

this._selectorUspItemImage = value;

,

get_selectButtonUspItemImage: function ()

return this._selectButtonUspItemImage;

,

set_selectButtonUspItemImage: function (value)

this._selectButtonUspItemImage = value;

,

get_deselectButtonUspItemImage: function ()

return this._deselectButtonUspItemImage;

,

set_deselectButtonUspItemImage: function (value)

this._deselectButtonUspItemImage = value;

,

get_selectedUspItemImage: function ()

if (this._selectedUspItemImage == null)

this._selectedUspItemImage = this.findElement("selectedUspItemImage");

return this._selectedUspItemImage;

SitefinityWebApp.Widgets.UspItem.Designer.UspItemDesigner.registerClass('SitefinityWebApp.Widgets.UspItem.Designer.UspItemDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);

Server Error in '/SitefinityWebApp' Application.

Value cannot be null.

Parameter name: stream

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace

for more information about the error and where it originated in the code.

Exception Details: System.ArgumentNullException: Value cannot be null.

Parameter name: stream

Source Error:

An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified

using the exception stack trace below.

Stack Trace:

[ArgumentNullException: Value cannot be null.

Parameter name: stream]

System.IO.StreamReader..ctor(Stream stream, Encoding encoding, Boolean detectEncodingFromByteOrderMarks, Int32 bufferSize, Boolean leaveOpen) +14145761

System.IO.StreamReader..ctor(Stream stream, Boolean detectEncodingFromByteOrderMarks) +135

Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers.MediaContentSelectorView.InitializeLists() +263

Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers.MediaContentSelectorView.InitializeControls(GenericContainer container) +42

Telerik.Sitefinity.Web.UI.SimpleView.CreateChildControls() +88

System.Web.UI.Control.EnsureChildControls() +189

System.Web.UI.Control.PreRenderRecursiveInternal() +60

System.Web.UI.Control.PreRenderRecursiveInternal() +222

System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +4297

Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.34248

All Replies