More in this section

Forums / General Discussions / MediaContentSelectorView - getting selected image(s)

MediaContentSelectorView - getting selected image(s)

5 posts, 0 answered
  1. Chris Bryant
    Chris Bryant avatar
    33 posts
    Registered:
    07 Jul 2009
    10 Mar 2011
    Link to this post
    I'm creating a custom widget that displays an image and some text.

    I'm using MediaContentSelectorView in the Control Designer to select the image.  I've already read, re-read, and studied this Post.

    But, I have two questions:

    1.  How do I get a collection of selected images out of the MediaContentSelectorView control?  Simply listening to the click event doesn't tell me if the item is being selected or deselected because the event fires in both cases.  Below is a snippet of code from my designer js file.

    2.  Is there a way to limit the MediaContentSelectorView control to one image being selected?  Such that, when an image is selected, any previously selected image gets unselected.

    My designer.js file:
    /// <reference name="MicrosoftAjax.js"/>
    /// <reference name="Telerik.Sitefinity.Resources.Scripts.jquery-1.3.2.min-vsdoc2.js" assembly="Telerik.Sitefinity.Resources"/>
    Type.registerNamespace("my.Widgets");
     
    var selectedImageUrl = "";
    // ------------------------------------------------------------------------
    // ContentBlockDesigner class
    // ------------------------------------------------------------------------
    my.Widgets.EmployeeProfileDesigner = function (element)
    {   
        this._selectorView = null;
        this._itemSelectDelegate = null;
        this._propertyEditor = null;
        my.Widgets.EmployeeProfileDesigner.initializeBase(this, [element]);
    }
     
    my.Widgets.EmployeeProfileDesigner.prototype = {
     
        /* ************************* set up and tear down ************************* */
        initialize: function ()
        {
            my.Widgets.EmployeeProfileDesigner.callBaseMethod(this, 'initialize');
     
            //image selector
            this._itemSelectDelegate = Function.createDelegate(this, this._itemSelect);
            this._selectorView.add_onItemSelectCommand(this._itemSelectDelegate);
        },
        dispose: function ()
        {
            my.Widgets.EmployeeProfileDesigner.callBaseMethod(this, 'dispose');
     
            //        if (this._selectorView)
            //        {
            //            this._selectorView.add_onItemSelectCommand(this._itemSelectDelegate);
            //        }
        },
     
     
        /* ************************* public methods ************************* */
        applyChanges: function ()
        {
            var controlData = this.get_propertyEditor().get_control();
            controlData.EmployeeName = $("#EmployeeNameEditorTextBox").val();
            controlData.EmployeeTitle = $("#EmployeeTitleEditorTextBox").val();
            controlData.EmployeeBio = $("#EmployeeBioEditorTextBox").val();
            controlData.ImageUrl = selectedImageUrl;
        },
     
        refreshUI: function ()
        {
            var data = this.get_propertyEditor().get_control();
            $("#EmployeeNameEditorTextBox").val(data.EmployeeName);
            $("#EmployeeTitleEditorTextBox").val(data.EmployeeTitle);
            $("#EmployeeBioEditorTextBox").val(data.EmployeeBio);
        },
     
        get_selectorView: function ()
        {
            return this._selectorView;
        },
     
        set_selectorView: function (value)
        {
            this._selectorView = value;
        },
     
        _itemSelect: function (sender, args)
        {
            var dataItem = args.get_dataItem();
     
        //using a global variable to capture the selected image; however, this event gets fired when they de-select an image as well.
            selectedImageUrl = dataItem.MediaUrl;
        },
     
        add_onItemSelectCommand: function (delegate)
        {
            this.get_events().addHandler('onItemSelectCommand', delegate);
        },
     
        /* ************************* properties ************************* */
        // gets the reference to the propertyEditor control
        get_propertyEditor: function ()
        {
            return this._propertyEditor;
        },
        // sets the reference fo the propertyEditor control
        set_propertyEditor: function (value)
        {
            this._propertyEditor = value;
        }
    };
    my.Widgets.EmployeeProfileDesigner.registerClass('my.Widgets.EmployeeProfileDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);

    As you can see, I'm using a global variable, selectedImageUrl, to store the last image that was clicked.  However, this isn't ideal, because if they click the image to de-select, it still fires the same onclick event...

    Can you provide me a code example of how to fetch data out of the MediaContentSelectorView control and pass it to my Designer.cs file?
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    11 Mar 2011
    Link to this post
    Hi Chris,

    Please take a look at this post.

    Kind regards,
    Ivan Dimitrov
    the Telerik team
  3. Chris Bryant
    Chris Bryant avatar
    33 posts
    Registered:
    07 Jul 2009
    11 Mar 2011
    Link to this post
    As I said, I have already read, re-read, and studied that post.  :)  I'm still struggling to understand how the data is passed back to the designer.cs.

    Can you please explain how to send data from the MediaContentSelectorView control to my Designer.cs?  In my js file, I'm listening for the Onclick event, but this event gets fired if the image is selected OR deselected.  So, by simply setting a variable onclick, I can't tell if they are selecting the image or de-selecting the image.

    Also, is there a way to limit the MediaContentSelectorView control to only one image being selected?
  4. Chris Bryant
    Chris Bryant avatar
    33 posts
    Registered:
    07 Jul 2009
    14 Mar 2011
    Link to this post
    Ivan,

    Can you provide any more assistance on this?  I've honestly read everything in that previous post, I don't understand how the OnClick event can be used to capture the data, because it's fired if you select or unselect an image.

    Can you provide any clarification or sample code?

    Also, is there a way to limit the MediaContentSelectorView such that only one image can be selected?

    Thank you
  5. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    17 Mar 2011
    Link to this post
    Hello Chris Bryant,

    What you can do is to add a button (input of type button) to the div container in which you have the media selector. Then bind to the click event of this button. When you select a media item the media selector contains the data item selected as a serialized JavaScript object. Once you click the event you should pass the id of the selected item to the control data Java Script object.

    Regards,
    Radoslav Georgiev
    the Telerik team
5 posts, 0 answered