Re-selecting Item in Media Selector and Clearing Selection

Posted by Community Admin on 21-Sep-2011 00:00

I've got a custom widget designer that uses a MediaContentSelectorView and am having troubles trying to accomplish a few things:

1) When the user comes back to edit the widget, I'd like to pre-select for them the media item they had selected last time they had made changes to the widget.

2) I'm using the media selector to select items for more than one thing. Is there a way to clear the currently selected item so that nothing is selected?

I've reviewed this post several times, but am not quite getting what I need to do to re-select an image or un-select one.

I've included my current JavaScript for the designer.

Type.registerNamespace("SF.Web.Controls.Home.Carousel");

SF.Web.Controls.Home.Carousel.CarouselDesigner = function (element)

this._carouselSlideArray = null;

this._lastValue = null;

this._imageSelector = null;

this._videoSelector = null;

this._currentlySelectedImageURL;

this._currentlySelectedVideoURL;

SFWeb.Controls.Home.Carousel.CarouselDesigner.initializeBase(this, [element]);

SF.Web.Controls.Home.Carousel.CarouselDesigner.prototype =

initialize: function ()

SF.Web.Controls.Home.Carousel.CarouselDesigner.callBaseMethod(this, 'initialize');

this._carouselSlideArray = ;

this._lastValue = 'slide1';

this._slideChangedDelegate = Function.createDelegate(this, this.saveSlideChanges);

$addHandler(document.getElementById('slide_selector'), 'change', this._slideChangedDelegate);

//also adding onchange for IE

$addHandler(document.getElementById('slide_selector'), 'onchange', this._slideChangedDelegate);

this._imageSelectDelegate = Function.createDelegate(this, this._imageItemSelect);

this._imageSelector.add_onItemSelectCommand(this._imageSelectDelegate);

this._videoSelectDelegate = Function.createDelegate(this, this._videoItemSelect);

this._videoSelector.add_onItemSelectCommand(this._videoSelectDelegate);

$("#RadWindowWrapper_PropertyEditorDialog").css('left', '150px');

,

dispose: function ()

SF.Web.Controls.Home.Carousel.CarouselDesigner.callBaseMethod(this, 'dispose');

if (this._imageSelector)

this._imageSelector.add_onItemSelectCommand(this._imageItemSelect);

,

_imageItemSelect: function (sender, args)

this._currentlySelectedImageURL = args.get_dataItem().MediaUrl;

,

_videoItemSelect: function (sender, args)

console.log(args.get_dataItem());

console.log(args.get_key());

console.log(args.get_itemElement());

this._currentlySelectedVideoURL = args.get_dataItem().MediaUrl;

,

saveSlideChanges: function ()

if (this._carouselSlideArray[this._lastValue] == undefined)

var obj =

'header': $("#HeaderText").val(),

'imageText': $("#ImageText").val(),

'imageURL': this._currentlySelectedImageURL,

'videoURL': this._currentlySelectedVideoURL

;

obj.toString = this.convertObjectToString;

else

var obj = this._carouselSlideArray[this._lastValue];

obj['header'] = $("#HeaderText").val();

obj['imageText'] = $("#ImageText").val();

if (this._currentlySelectedImageURL)

obj['imageURL'] = this._currentlySelectedImageURL;

if (this._currentlySelectedVideoURL)

obj['videoURL'] = this._currenlySelectedVideoURL;

this._carouselSlideArray[this._lastValue] = obj;

this._lastValue = $("#slide_selector").val();

this.updateUI();

,

get_imageSelector: function ()

return this._imageSelector;

,

set_imageSelector: function (value)

this._imageSelector = value;

,

get_videoSelector: function ()

return this._videoSelector;

,

set_videoSelector: function (value)

this._videoSelector = value;

,

updateUI: function ()

var item = this._carouselSlideArray[this._lastValue];

if (item)

$("#HeaderText").val(item['header']);

$("#ImageText").val(item['imageText']);

else

$("#HeaderText").val('');

$("#ImageText").val('');

console.log($(document).children());

$("#RadWindowWrapper_PropertyEditorDialog").css('left', '150px');

,

convertObjectToString: function ()

var nameValueArr = [];

for (var name in this)

var value = this[name];

if (typeof (value) !== "function")

nameValueArr.push(name + "=" + value);

nameValueArr = nameValueArr.join("&");

return nameValueArr;

,

convertStringToObject: function (val)

if (val)

var data = val.split('&');

var obj =

'header': data[0] == undefined ? '' : data[0].split('=')[1],

'imageText': data[1] == undefined ? '' : data[1].split('=')[1],

'imageURL': data[2] == undefined ? '' : data[2].split('=')[1],

'videoURL': data[3] == undefined ? '' : data[3].split('=')[1]

;

obj.toString = this.convertObjectToString;

return obj;

,

refreshUI: function ()

var data = this.get_controlData();

this._carouselSlideArray['slide1'] = this.convertStringToObject(data.SlideOne);

this._carouselSlideArray['slide2'] = this.convertStringToObject(data.SlideTwo);

this._carouselSlideArray['slide3'] = this.convertStringToObject(data.SlideThree);

this._carouselSlideArray['slide4'] = this.convertStringToObject(data.SlideFour);

this._carouselSlideArray['slide5'] = this.convertStringToObject(data.SlideFive);

this._lastValue = 'slide1';

this.updateUI();

,

applyChanges: function ()

this.saveSlideChanges();

var controlData = this.get_controlData();

controlData.SlideOne = this._carouselSlideArray['slide1'].toString();

controlData.SlideTwo = this._carouselSlideArray['slide2'].toString();

controlData.SlideThree = this._carouselSlideArray['slide3'].toString();

controlData.SlideFour = this._carouselSlideArray['slide4'].toString();

controlData.SlideFive = this._carouselSlideArray['slide5'].toString();

;

SF.Web.Controls.Home.Carousel.CarouselDesigner.registerClass('SF.Web.Controls.Home.Carousel.CarouselDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);

if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

Posted by Community Admin on 22-Sep-2011 00:00

Hi Norsenerd,

I reviewed the original code of MediaContentSelectorView.js - there are several event handlers that occur when the binding of the library list and the items in a library is done -

_mediaContentBinderItemDataBound and _libraryBinderDataBound

I suggest you to try and preselect your item in the selector in these event handlers.

All the best,
Lubomir Velkov
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

Posted by Community Admin on 26-Sep-2011 00:00

Hi Lubomir,
Thanks for your response. Can you provide an example use for each of the event handlers you mentioned?

Posted by Community Admin on 29-Sep-2011 00:00

Hello Norsenerd,

Well the MediaContentSelectorView class defines a client-side property named _libraryListBox - you can get a reference to it with get_libraryListBox() - this will return a reference to a sf:ItemsList with ID = mediaContentItemsList - then you can use its selectByIds: function (ids) method and pass an array of GUIDs of the items you wish to select.

Best wishes,
Lubomir Velkov
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

Posted by Community Admin on 29-Sep-2011 00:00

Lubomir,
Thanks for the response and information. I think I've almost got what I need, but in using the information you provided, I got an error when trying to set selected ids.

I'm using the following code (I'm using the get_mediaContentItemsList() instead of get_libraryListBox() because I want to set a selected image and not the library) :

var imgList = this._imageSelector.get_mediaContentItemsList();

imgList.selectByIds(['b4daff95-43d4-4b07-9f53-00a9ffcf437b']);

But I get the error uncaught exception: selectByIds not implemented for the 'abstract' ClientBinder.

Do you know why I'd be getting this error or an alternative method to accomplish selecting the item?

Posted by Community Admin on 04-Oct-2011 00:00

Hello Norsenerd,

Unfortunately it looks this is impossible to be done at the moment. Here is the source of the selectByIds() method of ClientBinder.js

...
selectByIds: function (ids)
throw "selectByIds not implemented for the 'abstract' ClientBinder.";
,
...

Kind regards,
Lubomir Velkov
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

Posted by Community Admin on 11-Apr-2012 00:00

I'd hate to revive an older thread but I was able to get around the selectbyids problem by implementing a different function and manually inserterting the selectedItems property and while searching for thie problem initially I kept running into this thread.

As already stated, selectByIds isn't actually implemented to get around this I had to implement the following code:

initialize: function ()

Namespace.callBaseMethod(this, 'initialize');

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

this._selectorView.add_onItemSelectCommand(this._itemSelectDelegate);

//This is the property that binds the images to the mediacontentselectorview.  Will need to capture this even to select the correct item.

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

//the mediaContentBinderItem in the mediacontentselectorview is null in the initialize event so need to add the delegate to the mediacontentselectorview at a later event.

this._onLoadDelegate = Function.createDelegate(this, this._onLoad);

//Add onload delegate to the component.

Sys.Application.add_load(this._onLoadDelegate);

,

_onLoad: function (sender, args)

//Add the mediaContentBinderItemDataBoundDelegate to the mediacontentselectorview

this._selectorView.get_mediaContentBinder().add_onItemDataBound(this._mediaContentBinderItemDataBoundDelegate);

,

_mediaContentBinderItemDataBound: function (sender, args)

var dataItem = args.get_dataItem();

var id = dataItem.Id;

//this.imageid is the guid of the image that was selected.

//If the guid of the image is the same as the item being bound add it to the selecteditem array found in the mediacontentselectorview

if (id == this._imageId)

sender._selectedItems.push(dataItem);

//The image is now selected but the styles for it to appear selected have to be added.

this._highlightSelectedImage(args.get_itemElement());

,

_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).addClass("sfSel");

$(selectedElement).find(".imgSelect").addClass("sfSelImgBorder");

,

Posted by Community Admin on 11-Apr-2012 00:00

Message was duplicated due to server error. Edited to remove.

This thread is closed

All Replies