MediaContentSelectorView - getting selected image(s)
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);Hi Chris,
Please take a look at this post.
Kind regards,
Ivan Dimitrov
the Telerik team
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?
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
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