Looking similar ImageSelector for Document List

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

Hello John,

You can use MediaContentSelector

www.sitefinity.com/.../image-selector-on-custom-controls.aspx

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

Best wishes,
Ivan Dimitrov
the Telerik team

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

Hi John,

Please modify the template as shown below

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.

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

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

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

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

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

Hi,

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

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.

Hello,

Please teke a look at this thread.

Kind regards,
Ivan Dimitrov
the Telerik team