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

Forums / Bugs & Issues / Looking similar ImageSelector for Document List

Looking similar ImageSelector for Document List

14 posts, 0 answered
  1. John
    John avatar
    17 posts
    Registered:
    03 Mar 2008
    26 May 2011
    Link to this post
    Hi,

    Is there any kind of "image selector" component for document list ? I need to provide a UI which allow the user to select any document that has been uploaded on document list. Anyway i could get the example code for that one ?

    Many Thanks
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    26 May 2011
    Link to this post
    Hello John,

    You can use MediaContentSelector

    http://www.sitefinity.com/devnet/forums/sitefinity-4-x/general-discussions/image-selector-on-custom-controls.aspx#1513334

    You should set ContentType to Telerik.Sitefinity.Libraries.Model.Document

    Best wishes,
    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
  3. John
    John avatar
    17 posts
    Registered:
    03 Mar 2008
    29 May 2011
    Link to this post
    I tried the example...but the disigner didn't show the item list on right window...only "Loading..." for ever.... i could see the document library i created on the left window..... whats wrong with my code ?


    SelectorDesigner.ascx

    <%@ Control Language="C#" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI"
        TagPrefix="sitefinity" %>
    <sitefinity:ResourceLinks ID="resourcesLinks" runat="server">
        <sitefinity:ResourceFile AssemblyInfo="SitefinityWebApp.Controls.Selector,SitefinityWebApp"
            Name="SitefinityWebApp.Resources.CSS.SelectorDesigner.css" Static="true" />
    </sitefinity:ResourceLinks>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers" TagPrefix="sf" %>
    <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.Images.ImageItemDescriptionTemplate.htm"
        DisplayResizingOptionsControl="false"
        ShowOpenOriginalSizeCheckBox="false">
    </sf:MediaContentSelectorView>


    SelectorDesigner.cs

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Sitefinity.Web.UI;
    using Telerik.Sitefinity.Web.UI.ControlDesign;
    using Telerik.Sitefinity.Web.UI.Fields;
    using Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers;

    namespace SitefinityWebApp.Resources.Designers
    {
        public class SelectorDesigner : ControlDesignerBase
        {
            protected override void InitializeControls(GenericContainer container)
            {
                base.DesignerMode = ControlDesignerModes.Simple;
            }

            protected override string LayoutTemplateName      
            {
                get
                {
                    return "SitefinityWebApp.Resources.Designers.SelectorDesigner.ascx";
                }
            }

            protected override HtmlTextWriterTag TagKey
            {
                get
                {
                    return HtmlTextWriterTag.Div;
                }
            }

            public override IEnumerable<ScriptDescriptor> GetScriptDescriptors()
            {
                var scriptDescriptors = new List<ScriptDescriptor>(base.GetScriptDescriptors());
                var desc = (ScriptControlDescriptor)scriptDescriptors.Last();
                desc.AddComponentProperty("selectorView", SelectorView.ClientID);
                return scriptDescriptors.ToArray();
            }

            public override IEnumerable<System.Web.UI.ScriptReference> GetScriptReferences() {
                var res = new List<ScriptReference>(base.GetScriptReferences());
                var assemblyName = this.GetType().Assembly.GetName().ToString();
                res.Add(new ScriptReference("SitefinityWebApp.Resources.JS.SelectorDesigner.js", assemblyName));
                return res.ToArray();
            }

            protected MediaContentSelectorView SelectorView
            {
                get
                {
                    return Container.GetControl<MediaContentSelectorView>("selectorView", true);
                }
            }
        }
    }


    SelectorDesigner.js

    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();

  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    30 May 2011
    Link to this post
    Hi John,

    Please modify the template as shown below

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


    Greetings,
    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
  5. John
    John avatar
    17 posts
    Registered:
    03 Mar 2008
    02 Jun 2011
    Link to this post
    Can we use the same method to select page url as well ? i want to populate the list of pages  and let the user select which page that they want to attach to custom control i create to display blogs,news etc etc.
  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    02 Jun 2011
    Link to this post
    Hi John,

    Take a look at this post

    http://www.sitefinity.com/devnet/forums/sitefinity-4-x/sdk/how-to-add-page-selector-button-in-sitefinity-4-0-rc.aspx#1456140



    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
  7. John
    John avatar
    17 posts
    Registered:
    03 Mar 2008
    05 Jun 2011
    Link to this post
    Is it possible to declare MediaContentSelectorView three times on the same control designers ? My scenario is like this:

    One to select the image, one to select the pdf file from document library and one to select one of the pages url.

    I saw the javascript but i am stuck with

        get_selectorView: function () {
            return this._selImageView;
        },

        set_selectorView: function (value) {
            this._selImageView = value;
        },

    i tried to create other two pairs of them for PDF and Pages View Selector but it didn't work:

        get_selectorDocView: function () {
            return this._selDocView;
        },

        set_selectorDocView: function (value) {
            this._selDocView = value;
        },

        get_selectorPageView: function () {
            return this._selPageView;
        },

        set_selectorPageView: function (value) {
            this._selPageView = value;
        },







  8. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    08 Jun 2011
    Link to this post
    Hello John,

    Each controlhas its own client component, so you need to work with them separately. I haven't tested with multiple controls of the same type inside a single view of the designer, but there shouldn't be an issue.

    Best wishes,
    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
  9. Kieran
    Kieran avatar
    56 posts
    Registered:
    14 Aug 2008
    04 Aug 2011
    Link to this post
    Hi,

    I've been trying for ages to implement this designer for selecting an Image.

    I followed the above example but to no avail.

    I create a usercontrol
    using System;
    using Telerik.Sitefinity.Web.UI.ControlDesign;
     
    namespace SitefinityWebApp.Resources
    {
        [ControlDesigner(typeof(SelectorDesigner))]
        public partial class FrontEnd : System.Web.UI.UserControl
        {
            protected void Page_Load(object sender, EventArgs e)
            {
     
            }
        }
    }


    and then add that control the the toolbox.
     
    <tools>
    <add enabled="True" type="~/Resources/FrontEnd.ascx" title="SelectorTest" description="Adding a user control" resourceClassId="" cssClass="" layoutTemplate="" moduleName="" visibilityMode="None" name="SelectorTest" />
    </tools>

    But when I edit the control in the admin area I get the attached error

    Can you point where I am going wrong.

    Thanks
    Kieran


  10. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    08 Aug 2011
    Link to this post
    Hi Kieran,

    What  is the code you have in SelectorDesigner class and its template? The problem is not in the control itself, but in its designer.

    Best wishes,
    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
  11. Ishtiyaq
    Ishtiyaq avatar
    11 posts
    Registered:
    17 Sep 2011
    02 Jan 2012
    Link to this post
    Hi,

    I am having the same issue and stuck to have document selector Field. Please, can you send me the code so it will be help ful for me.

    Regards,
    Ishityaq Mohammed.
  12. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    02 Jan 2012
    Link to this post
    Hi,

    You can take a look at this article. You only have to replace the types in it, so you will get document items.



    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
  13. martin
    martin avatar
    36 posts
    Registered:
    30 Nov 2008
    16 Jan 2012
    Link to this post
    Hi Ivan,

    I was able to implement that control using both John and your threads.
    I am having an issue actually retrieving what document the user actual selected.

    applyChanges: function () {
           var controlData = this._propertyEditor.get_control();
           controlData.selectedDoc = ????????       
       }

    I have selectedDoc as a public variable.

    Any help would be great

    Kieran
  14. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    17 Jan 2012
    Link to this post
    Hello,

    Please teke a look at this thread.

    Kind 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
14 posts, 0 answered