Custom Control with Document Selector and Image Selector

Posted by Community Admin on 15-Jun-2011 00:00

Hi,

I was just wondering is it possible to create a custom control which can have an Image selector and Document selector added to the properties?

Basically I've got a heap of documents with Thumb nails on our existing site, and it would be just quicker to have a control rather than add a doc, add and image. etc

Thanks in advance
Byron

Posted by Community Admin on 15-Jun-2011 00:00

Just a bit more info on what I was hoping to complete

Control to drop onto a page
Properties
* Image located in system
* Document located in system
* few other minor properties

It would display something like this:

<div class=[property]>

<a href=[link to doc]>

<img scr=[img from system] />

<br />

[Doc Title] [Doc Size] ([Doc Type])

<a/>

</div>

(While I can quickly do it by just typing the URL for the doc and img, I actually want it to load all the details stored against the files)

Posted by Community Admin on 15-Jun-2011 00:00

Hello Byzza,

You can have a selector only in the designer of the control. You can use MediaContentSelector directly. Please check this thread

www.sitefinity.com/.../looking-similar-imageselector-for-document-list.aspx

All the best,
Ivan Dimitrov
the Telerik team

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 17-Jun-2011 00:00

Hi,

Thank for that. I think that is exactly what I'm after. But unfortunatly I have no idea what I'm doing when it comes to more complex controls. So far all the controls I've created have been single page controls which I hack together then dump on the test server (i.e. no back end code).

So I thought I would give this a go with this, but I just don't think it will work will it?
Below is my code. All stored in one usercontrol (ascx) file.

<%@ Control Language="Vb" ClassName="documetnControl" %>

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

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

TagPrefix="sitefinity" %>

<%@ Import Namespace="System.Collections.Generic" %>

<%@ Import Namespace="System.Linq" %>

<%@ Import Namespace="System.Text" %>

<%@ Import Namespace="System.Web.UI" %>

<%@ Import Namespace="System.Web.UI.WebControls" %>

<%@ Import Namespace="Telerik.Sitefinity.Web.UI" %>

<%@ Import Namespace="Telerik.Sitefinity.Web.UI.ControlDesign" %>

<%@ Import Namespace="Telerik.Sitefinity.Web.UI.Fields" %>

<%@ Import Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers" %>

<script runat="server">

Public Class SelectorDesigner

Inherits ControlDesignerBase

Protected Overrides Sub InitializeControls(ByVal container As GenericContainer)

MyBase.DesignerMode = ControlDesignerModes.Simple

End Sub

Protected Overrides ReadOnly Property LayoutTemplateName() As String

Get

Return "SitefinityWebApp.Resources.Designers.SelectorDesigner.ascx"

End Get

End Property

Protected Overrides ReadOnly Property TagKey() As HtmlTextWriterTag

Get

Return HtmlTextWriterTag.Div

End Get

End Property

Public Overrides Function GetScriptDescriptors() As IEnumerable(Of ScriptDescriptor)

Dim scriptDescriptors = New List(Of ScriptDescriptor)(MyBase.GetScriptDescriptors())

Dim desc = DirectCast(scriptDescriptors.Last(), ScriptControlDescriptor)

desc.AddComponentProperty("selectorView", SelectorView.ClientID)

Return scriptDescriptors.ToArray()

End Function

Public Overrides Function GetScriptReferences() As IEnumerable(Of System.Web.UI.ScriptReference)

Dim res = New List(Of ScriptReference)(MyBase.GetScriptReferences())

Dim assemblyName = Me.[GetType]().Assembly.GetName().ToString()

res.Add(New ScriptReference("SitefinityWebApp.Resources.JS.SelectorDesigner.js", assemblyName))

Return res.ToArray()

End Function

Protected ReadOnly Property SelectorView() As MediaContentSelectorView

Get

Return Container.GetControl(Of MediaContentSelectorView)("selectorView", True)

End Get

End Property

End Class

</script>

<script type="text/javascript">

Type.registerNamespace("SitefinityWebApp");

Type.registerNamespace("SitefinityWebApp.Resources.Designers");

SitefinityWebApp.Resources.Designers.SelectorDesigner = function (element)

this._selectorView = null;

this._itemSelectDelegate = null;

SitefinityWebApp.Resources.Designers.SelectorDesigner.initializeBase(this, [element]);

SitefinityWebApp.Resources.Designers.SelectorDesigner.prototype =

initialize: function ()

SitefinityWebApp.Resources.Designers.SelectorDesigner.callBaseMethod(this, 'initialize');

this._itemSelectDelegate = Function.createDelegate(this, this._itemSelect);

this.add_onItemSelectCommand(this._itemSelectDelegate);

,

_itemSelect: function (sender, args)

var dataItem = args.get_dataItem();

this._selectedImageKey = args.get_key();

var selectedElement = args.get_itemElement();

this._highlightSelectedImage(selectedElement);

,

_highlightSelectedImage: function (selectedElement)

if (this.selectedImageElement)

if (this.selectedImageElement != selectedElement)

$(this.selectedImageElement).find(".imgSelect").removeClass("sfSelImgBorder");

$(this.selectedImageElement).removeClass("sfSel");

else

$(this.selectedImageElement).addClass("sfSel");

if (selectedElement)

this.selectedImageElement = selectedElement;

$(selectedElement).find(".imgSelect").addClass("sfSelImgBorder");

,

add_onItemSelectCommand: function (delegate)

this.get_events().addHandler('onItemSelectCommand', delegate);

,

dispose: function ()

SitefinityWebApp.Resources.Designers.SelectorDesigner.callBaseMethod(this, 'dispose');

if (this._selectorView)

this._selectorView.add_onItemSelectCommand(this._itemSelectDelegate);

,

get_selectorView: function ()

return this._selectorView;

,

set_selectorView: function (value)

this._selectorView = value;

,

refreshUI: function ()

var data = this._propertyEditor.get_control();

$(this._propertyEditor.get_advancedModeButton()).hide();

,

applyChanges: function ()

var data = this._propertyEditor().get_control();

SitefinityWebApp.Resources.Designers.SelectorDesigner.registerClass('SitefinityWebApp.Resources.Designers.SelectorDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);

if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

</script>

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

<sitefinity:ResourceFile AssemblyInfo="SitefinityWebApp.Controls.Selector,SitefinityWebApp"

Name="SitefinityWebApp.Resources.CSS.SelectorDesigner.css" Static="true" />

</sitefinity:ResourceLinks>

<sf:MediaContentSelectorView id="selectorView" runat="server" ContentType="Telerik.Sitefinity.Libraries.Model.Document"

ParentType="Telerik.Sitefinity.Libraries.Model.DocumentLibrary" LibraryBinderServiceUrl="~/Sitefinity/Services/Content/DocumentLibraryService.svc/"

MediaContentBinderServiceUrl="~/Sitefinity/Services/Content/DocumentService.svc/"

MediaContentItemsListDescriptionTemplate="Telerik.Sitefinity.Resources.Templates.Designers.Libraries.Documents.DocumentItemDescriptionTemplate.htm"

DisplayResizingOptionsControl="false" ShowOpenOriginalSizeCheckBox="false">

</sf:MediaContentSelectorView>

<sf:MediaContentSelectorView

id="selectorView2"

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>

If it is possible to get it working this way it would be appreciated.
Thank you

Posted by Community Admin on 17-Jun-2011 00:00

Hi,

Here is an article that shows steps-by-step how to create a designer for your control, so you can plug the content selectors there.

Regards,
Ivan Dimitrov
the Telerik team

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 19-Jun-2011 00:00

I'm getting a 500 error when I try and visit that link.

RegardsByron

Posted by Community Admin on 19-Jun-2011 00:00

Don't worry got it working.
actuall link for others:
http://www.sitefinity.com/40/help/developers-guide/sitefinity-essentials-controls-working-with-control-designers.html

Posted by Community Admin on 08-May-2015 00:00

All these links are broken... looking for examples of implementing a document picker in a custom widget designer.

Posted by Community Admin on 13-May-2015 00:00

Hello Richard,

Below you can find some helpful links for creation of Widget designer and Image selector:
- Widget designers
- Thunder: Create widget designers
- Create an image selector for content items
- Selecting Sitefinity 4 Content Inside Widget Designers

I hope this information helps.

Regards,
Svetoslav Manchev
Telerik

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items

Posted by Community Admin on 09-Jul-2015 00:00

Svetoslav,

Those links don't really help. Looking to follow steps in placing a document selector in a custom widget designer. Already am able to create widgets with designers, using image selectors, just not documents....

Posted by Community Admin on 14-Jul-2015 00:00

Hello Charles,

In order to create a Documents selector, you can generate a Designer for existing widget using Sitefinity Thunder where to add a new property as Document selector. You just need to have this property in your widget (example), here is the result.

Regards,
Svetoslav Manchev
Telerik

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items

Posted by Community Admin on 07-Sep-2016 00:00

And if the designer already exists? Do we have to delete and recreate it just to add a selector?!

Please tell me me it is possible to add one to an costing designer...

This thread is closed

All Replies