Image Selector on Custom Controls

Hey Telerik Team,

In following along with various posts in how to implement page selectors in custom control templates, I was wondering how you might go about implementing an image selector in a custom control template - choosing an image from the libraries as you see in the regular Sitefinity Image widget.

Can you point me to some documentation or code example that would illustrate that?  I apologize if this has been answered previously.  I just can't seem to find that in a forum search.

Thanks

- Wiliam

Hello WilliamCooper,

You could use MediaContentSelectorView control to achieve the required functionality. Here is an example how to declare it:

Hi Pepi,

Thanks for that nice code snippet, those help.  I'll try to implement it tomorrow.

I'm assuming that registering that designer in the .cs file is similar to how you'd register the page selector?  If not, can you give me an idea of what the .cs file and the .js file would look like in terms of the custom control designer?

Thanks much.  I'll post again when I've had a chance to test it out.

Great work on the final release.

- William

Hello William,

Please take a look at How to create a custom widget.  If there are any questions, please update the post with them.

Best wishes,
Ivan Dimitrov
the Telerik team

Hi Ivan,

I guess my question (and I've done a number of custom widgets now in my testing) is how to get and set the value of the Media Selector.  With the Page Selector, there was a great deal of component registering and javascript code that supported passing values back and forth.

So the big question is, what goes in the refreshUI and applyChanges blocks of the prototype to support getting a usuable value from the Media Selector to pass?  And if necessary, what would go in the supporting .cs file in terms of ScriptDescriptors to register the Media Selector component?

Thanks!

- William

Hello William,

refreshUI()
This method is called, when you need to refresh or update the user interface of your designer with the new data. Sitefinity automatically calls this method every time it needs to (for example, user switches to advanced mode and changes some properties in the property grid, then switches back to the simple mode or designer – this method will be called so that you can update the user interface of your designer with the changes that have been made in the advanced mode. Generally you can think of this method as “from data to user interface”.

- applyChanges()
This method is called, when Sitefinity needs to get the properties from your designer. For example, let’s say that user clicks the “Done” button in the designer. In that case Sitefinity needs to get all the properties from your designer and persist them so that it can render the widget properly. Generally, you can think of this method as “from user interface to data”.

Kind regards,
Ivan Dimitrov
the Telerik team

Hey Ivan,

I actually understand how the prototype methods works, as I've done several custom controls by now.  My question was about specifics.  I can't quite figure out what the actual code would be to get the value from the Media Selector mentioned by Pepi and pass it a value in.  Can you provide any specifics for this case?

For instance, looking at the value in "selectorView" returns undefined on submit.  Obviously that's not the correct place to look for the value of the image selected.  So where would that be?

A quick code snippet would be fantastic if possible.

Thanks

- William

Hello William,

Inside Initialize of your javascript you can create a delegate and subscribe for onItemSelectCommand

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

and get the selected item


    _itemSelect: function (sender, args)
        var dataItem = args.get_dataItem();
    ,

    add_onItemSelectCommand: function (delegate)
        this.get_events().addHandler('onItemSelectCommand', delegate);
    ,

All the best,
Ivan Dimitrov
the Telerik team

Hello,

I need this image selector too but in a custom module I develop.

Is there a way to add it to the insert form definitions using a definition element?

Can you provide me a short sample to do this?

Thanks

Jocelyn

Hey Ivan,

I think I'm still missing either some pieces to this, or some understanding.  I'm going to share the code I have so far and maybe you can tell me what is missing in terms of capturing information about the image selected when somebody hits "save".  Basically, I need to capture information about the image selected so that I can pass it back to the control that calls it, and obviously pass information back from the control to the selector to pre-select images.

Since in advanced cases, one might like to have multiple image selectors, I'd need that information pass back from that specific selector so that I could potentially add a second to the control.  In other words, the data needs to come from "selectorView" specifically.

ImageControlDesignerTemplate.ascx

Hello William,

Inside the control designer you have to add reference to MediaContentSelectorView and then send  its client ID to the client side component.

Ivan,

Yes, I was indeed missing a piece of this.  Mainly, I'd forgotten to add the SelectorView into the GetScriptDescriptors.

This works like a charm now, thanks.

One extra question, which I don't necessarily need for this, but which would make the solution complete.  Can you show me how you'd pre-select an image based on a GUID passed in?  In other words, I'd love it if the image you'd previously selected was pre-selected when you went to edit later.

I'm assuming that's another handler, but I'm not sure which handlers are involved with the Media Selector.

Any ideas?

Thanks

- William

Hi William,

You can use css , but you should pass the value back to itemSelected. You can keep the key in gloabal variable. The code should something like this.


   _itemSelected: function (sender, args)
        var dataItem = args.get_dataItem();
        // or you can try getting the image key from the args
        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");
       

    ,

Regards,
Ivan Dimitrov
the Telerik team

Hi Ivan,

I've had a go at getting an image selector working as in the code examples above.  I have some textboxes that I'm using to set string values in my control from the designer (which all work fine),  I can see and select images, however I also want to set the url of the selected image from the custom designer into a string value on the control and I can't work out how to do this.  Could you provide an example of how I can achieve this?

In the designer.js I have the following

    get_widthTxtControl: function ()
        return this._widthTxtControl;
    ,
    set_widthTxtControl: function (value)
        this._widthTxtControl = value;
    ,

    refreshUI: function ()
        var data = this.get_controlData();

        $("#" + this._widthTxtControl.id).val(data.Width);
    ,
    
    applyChanges: function ()
        var data = this.get_controlData();

        data.Width = $("#" + this._widthTxtControl.id).val();
   
    
I've tried adding something like but no luck

    var imageUrl = args.get_dataItem().MediaUrl;
    this.set_imageSelectorView(imageUrl);
    
Once I get that working I'd also like to add another MediaContentSelectorView for selecting documents, so I'm hoping this will be a similar process.

Thanks in advance
Mark   

Hi Mark,

The dataitem should have MediaUrl property. Do you get it when you call

var imageUrl = args.get_dataItem().MediaUrl;



Best wishes,
Ivan Dimitrov
the Telerik team

Hi Ivan,

Thanks for the reply, yep I've got that working now.  Just one extra thing to polish this off.  I'd like to highlight the image and document selected when the user goes back to edit.  I've tried playing around with the code in the thread but can't really work this out, I'm kind off coding blind here as I'm not really that sure what I should be doing.  I've put the code for my designer.js below, any help is much appreciated.

Cheers
Mark

Hi Mark,

You can get the selected item Id and save it as a public property of the control. Then when you click on the edit buton you should subscribe for the client ItemDataBound event of the selector view get the item you need by Id and set the css. In RefreshUI you can subscribe for add_onItemDataBound

Here is how to save the item ID as a public property

initialize: function ()
        Telerik.Sitefinity.Samples.SimpleViewCustomDesigner.callBaseMethod(this, 'initialize');

        this._itemSelectedDelegate = Function.createDelegate(this, this._propertyGridItemSelectCommand);
        this._selectorView.add_onItemSelectCommand(this._itemSelectedDelegate);



        this._mediaContentBinderItemDataBoundDelegate = Function.createDelegate(this, this._mediaContentBinderItemDataBound);

    ,

_propertyGridItemSelectCommand: function (sender, args)
        var dataItem = args.get_dataItem();
        var d = this.get_controlData();
        d.SelectedItemValue = dataItem.Id;
    ,

    _mediaContentBinderItemDataBound: function (sender, args)
        var dataItem = args.get_dataItem();
        var id = dataItem.Id;

    ,

    refreshUI: function ()
        var data = this.get_controlData();
        var selector = this.get_selectorView();
this._selectorView.get_mediaContentBinder().add_onItemDataBound(this._mediaContentBinderItemDataBoundDelegate);
     ,


where SelectedItemValue is a public property of your control.

All the best,
Ivan Dimitrov
the Telerik team

Hi William/Ivan,

Can either of you share the files in a zip. I'm trying to get this to work but I'm getting an invalid resource error when I click select. All I need is to be able to select an image, nothing too fancy. Thanks!

YES! Can comeone please post a complete, working example on how to use the MediaContentSelectorView.

I am trying to develop an update form, that maintains a RadGrid of personnel details, and one of the fields is a photo. I have spent the last three days delving through countless forum posts, but have not found a complete example of how to do this.

I just need one source code example that I can use to learn from, to adapt to what I need.

I could send you two.  One that I have working, to use through the Module Builder.  And one using the MediaContentSelectorView in a custom built "intra-site" module.  I'm am only version 5.0 of Sitefinity so I do not know if it will work with later versions.  This code is from a message rotator thingy I wrote and is using the MediaContentSelectorView

AddEditView.ascx

Thanks for the example. Still trying to get my head around all these new objects and code blocks.

I have noticed that everybody is embedding the control inside their widget, to show the "Select an Image" form contents, along with their own. Is there a way to just have a link, to pop-up the standard Sitefinity image control on top of the screen?

You're right they do but that is because everyone is basing it off of the Blog Posts and forum articles that Sitefinity's team posts.

The only example I have that you might be able get to work is a separate widget and you might be able to reference it on your page.  I currently use in the module builder.  I'll link it but is very much like one of the blog posts from a Sitefinity Team Member.  Sorry for the block code but I cannot give you an example any other way.

ImageField.ascx

ImageField.js

ImageFieldDefinition.cs

ImageFieldDefinitionElement.cs

Not sure if this will work, because I already have a widget, which I want to embed a link to the "Select an Image" within. So in effect, I want to place the Sitefinity image widget, within my own widget.

If anybody has the source code for Sitefinity's 5.4 image widget, or a way to extend that widget into a new one, I'd very much like to review your ideas. Thanks.

Another thing that may help, is that this is NOT the widgets controller, but in the widget itself. It is designed to display along with the widget's contents, not as part of it's property display in the control designer.

So I guess this is why a lot of the examples are not working for me, as I'm trying to use them in the widget itself, and the code assumes I am using the designer associated the widget?

Hi William/Ivan,

I'm using this code as below:

Type.registerNamespace("SitefinityWebApp.WidgetDesigners.ExperienceContentWidget");



SitefinityWebApp.WidgetDesigners.ExperienceContentWidget.ExperienceContentWidgetDesigner = function (element)
    /* Initialize Message fields */
    this._title = null;
    this._hTMLContent = null;
    this._overlayPosition = null;
    this._overlayWidth = null;
    this._overlayColor = null;
    this._backgroundImage = null;
    
    //this._selectorView = null;
    //this._itemSelectDelegate = null;
    this._newEmployeeImage = null;
    this._insertBackGround = null;
    
    this._backGroundSelectorView = null;
    this._itemSelectDelegate = null;
    this.selectedImageUrl = null;
    
    /* Calls the base constructor */
    SitefinityWebApp.WidgetDesigners.ExperienceContentWidget.ExperienceContentWidgetDesigner.initializeBase(this, [element]);


SitefinityWebApp.WidgetDesigners.ExperienceContentWidget.ExperienceContentWidgetDesigner.prototype =
    /* --------------------------------- set up and tear down --------------------------------- */
    initialize: function ()
        /* Here you can attach to events or do other initialization */
        SitefinityWebApp.WidgetDesigners.ExperienceContentWidget.ExperienceContentWidgetDesigner.callBaseMethod(this, 'initialize');
        
        this._itemSelectDelegate = Function.createDelegate(this, this._itemSelect);
        this._backGroundSelectorView.add_onItemSelectCommand(this._itemSelectDelegate);
        //this.add_onItemSelectCommand(this._itemSelectDelegate);
        //this._mediaContentBinderItemDataBoundDelegate = Function.createDelegate(this, this._mediaContentBinderItemDataBound);
    ,
    dispose: function ()
        /* this is the place to unbind/dispose the event handlers created in the initialize method */
        SitefinityWebApp.WidgetDesigners.ExperienceContentWidget.ExperienceContentWidgetDesigner.callBaseMethod(this, 'dispose');
        
        if (this._backGroundSelectorView)
            this._backGroundSelectorView.add_onItemSelectCommand(this._itemSelectDelegate);
       
    ,
    _propertyGridItemSelectCommand: function (sender, args)
        var dataItem = args.get_dataItem();
        var d = this.get_controlData();
        d.SelectedItemValue = dataItem.Id;
    ,

    _mediaContentBinderItemDataBound: function (sender, args)
        var dataItem = args.get_dataItem();
        var id = dataItem.Id;

    ,
    
   

    /* --------------------------------- public methods ---------------------------------- */

    findElement: function (id)
        var result = jQuery(this.get_element()).find("#" + id).get(0);
        return result;
    ,

    /* Called when the designer window gets opened and here is place to "bind" your designer to the control properties */
    refreshUI: function ()
        var controlData = this._propertyEditor.get_control().Settings; /* JavaScript clone of your control - all the control properties will be properties of the controlData too */
        /* RefreshUI Message */
        jQuery(this.get_title()).val(controlData.Title);
        jQuery(this.get_overlayPosition()).val(controlData.OverlayPosition);
        jQuery(this.get_overlayWidth()).val(controlData.OverlayWidth);
        jQuery(this.get_overlayColor()).val(controlData.OverlayColor);
        jQuery(this.get_backgroundImage()).val(controlData.BackgroundImage);
        var editor = $find('HTMLContent');
        if (controlData.HTMLContent != undefined)
            editor.set_html(controlData.HTMLContent);
       
       

    ,

    /* Called when the "Save" button is clicked. Here you can transfer the settings from the designer to the control */
    applyChanges: function ()
        var controlData = this._propertyEditor.get_control().Settings;

        /* ApplyChanges Message */
        controlData.Title = jQuery(this.get_title()).val();
        controlData.OverlayPosition = jQuery(this.get_overlayPosition()).val();
        controlData.OverlayWidth = jQuery(this.get_overlayWidth()).val();
        controlData.OverlayColor = jQuery(this.get_overlayColor()).val();
        controlData.BackgroundImage = jQuery(this.get_backgroundImage()).val();
        controlData.BackGroundSelectorView = this.get_backGroundSelectorView();
        var backgroundImage = this.get_backGroundSelectorView();
        console.log(backgroundImage);
        var url = this.get_selectedImageUrl();
        console.log(url);
        //console.log(selectedImageUrl);
        console.log(jQuery("#HTMLContent").val());
        var editor = $find('HTMLContent');
        controlData.HTMLContent = editor.get_html();
       

    ,

    /* --------------------------------- event handlers ---------------------------------- */

    /* --------------------------------- private methods --------------------------------- */

    /* --------------------------------- properties -------------------------------------- */

    /* Message properties */
    get_title: function () return this._title; ,
    set_title: function (value) this._title = value; ,
    get_hTMLContent: function () return this._hTMLContent; ,
    set_hTMLContent: function (value) this._hTMLContent = value; ,
    get_overlayPosition: function () return this._overlayPosition; ,
    set_overlayPosition: function (value) this._overlayPosition = value; ,
    get_overlayWidth: function () return this._overlayWidth; ,
    set_overlayWidth: function (value) this._overlayWidth = value; ,
    get_overlayColor: function () return this._overlayColor; ,
    set_overlayColor: function (value) this._overlayColor = value; ,
    get_backgroundImage: function () return this._backgroundImage; ,
    set_backgroundImage: function (value) this._backgroundImage = value; ,
    get_newEmployeeImage: function ()
        return this._newEmployeeImage;
    ,
    set_newEmployeeImage: function (value)
        this._newEmployeeImage = value;
    ,
    get_insertBackGround: function ()
        return this._insertBackGround;
    ,
    set_insertBackGround: function (value)
        this._insertBackGround = value;
    ,
    get_backGroundSelectorView: function ()
        return this._backGroundSelectorView;
,
    set_backGroundSelectorView: function (value)
        this._backGroundSelectorView = value;
    ,
    get_selectedImageUrl: function ()
        return this.selectedImageUrl;
,
    set_selectedImageUrl: function (value)
        this.selectedImageUrl = value;
    ,
    _itemSelect: function (sender, args)
        var dataItem = args.get_dataItem();
        set_selectedImageUrl(dataItem.MediaUrl);
    ,

    add_onItemSelectCommand: function (delegate)
        this.get_events().addHandler('onItemSelectCommand', delegate);
    ,
 
   


SitefinityWebApp.WidgetDesigners.ExperienceContentWidget.ExperienceContentWidgetDesigner.registerClass('SitefinityWebApp.WidgetDesigners.ExperienceContentWidget.ExperienceContentWidgetDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);

But it has a error with message: Uncaught TypeError: undefined is not a function

please tell me why.

Thanks.

I didn't see anything inherently wrong in your code but usually it is a naming issue.  Your properties and methods having different names, forgotten ones, casing issues.  When I run into these errors, I generally comment out a property at a time from my widget designers ascx, js, and cs until it works.  Then I figure out what is wrong with that property/control