Custom Control with Document Selector and Image Selector
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
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
>
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
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
>
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
I'm getting a 500 error when I try and visit that link.
RegardsByron
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
All these links are broken... looking for examples of implementing a document picker in a custom widget designer.
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
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....
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
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...