More in this section

Forums / General Discussions / Re-selecting Item in Media Selector and Clearing Selection

Re-selecting Item in Media Selector and Clearing Selection

8 posts, 0 answered
  1. NorseNerd
    NorseNerd avatar
    21 posts
    Registered:
    25 Apr 2011
    21 Sep 2011
    Link to this post
    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();
  2. Lubomir Velkov
    Lubomir Velkov avatar
    688 posts
    Registered:
    03 Nov 2014
    22 Sep 2011
    Link to this post
    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
  3. NorseNerd
    NorseNerd avatar
    21 posts
    Registered:
    25 Apr 2011
    26 Sep 2011
    Link to this post
    Hi Lubomir,
      Thanks for your response.  Can you provide an example use for each of the event handlers you mentioned?
  4. Lubomir Velkov
    Lubomir Velkov avatar
    688 posts
    Registered:
    03 Nov 2014
    29 Sep 2011
    Link to this post
    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
  5. NorseNerd
    NorseNerd avatar
    21 posts
    Registered:
    25 Apr 2011
    29 Sep 2011
    Link to this post
    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?
  6. Lubomir Velkov
    Lubomir Velkov avatar
    688 posts
    Registered:
    03 Nov 2014
    04 Oct 2011
    Link to this post
    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
  7. Brett Whittington
    Brett Whittington avatar
    89 posts
    Registered:
    10 Aug 2012
    11 Apr 2012
    Link to this post
    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");
            }
        },
  8. Brett Whittington
    Brett Whittington avatar
    89 posts
    Registered:
    10 Aug 2012
    11 Apr 2012
    Link to this post
    Message was duplicated due to server error.  Edited to remove.
8 posts, 0 answered