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

Forums / Developing with Sitefinity / Custom Control with Document Selector and Image Selector

Custom Control with Document Selector and Image Selector

12 posts, 0 answered
  1. Byzza
    Byzza avatar
    89 posts
    Registered:
    09 Jul 2007
    15 Jun 2011
    Link to this post
    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
  2. Byzza
    Byzza avatar
    89 posts
    Registered:
    09 Jul 2007
    15 Jun 2011
    Link to this post
    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)
  3. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    15 Jun 2011
    Link to this post
    Hello Byzza,

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

    http://www.sitefinity.com/devnet/forums/sitefinity-4-x/bugs-issues/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
  4. Byzza
    Byzza avatar
    89 posts
    Registered:
    09 Jul 2007
    17 Jun 2011
    Link to this post
    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
  5. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    17 Jun 2011
    Link to this post
    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
  6. Byzza
    Byzza avatar
    89 posts
    Registered:
    09 Jul 2007
    19 Jun 2011
    Link to this post
    I'm getting a 500 error when I try and visit that link.

    RegardsByron
  7. Byzza
    Byzza avatar
    89 posts
    Registered:
    09 Jul 2007
  8. Richard
    Richard avatar
    103 posts
    Registered:
    04 Apr 2013
    08 May 2015
    Link to this post
    All these links are broken... looking for examples of implementing a document picker in a custom widget designer. 
  9. Svetoslav Manchev
    Svetoslav Manchev avatar
    735 posts
    Registered:
    07 Dec 2016
    13 May 2015
    Link to this post
    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
     
  10. Charles
    Charles avatar
    36 posts
    Registered:
    18 Apr 2011
    09 Jul 2015 in reply to Svetoslav Manchev
    Link to this post

    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....

  11. Svetoslav Manchev
    Svetoslav Manchev avatar
    735 posts
    Registered:
    07 Dec 2016
    14 Jul 2015
    Link to this post
    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
     
  12. Brian
    Brian avatar
    26 posts
    Registered:
    12 Jun 2015
    07 Sep in reply to Svetoslav Manchev
    Link to this post

    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...

12 posts, 0 answered