+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Image Uploader in Control Designer

Image Uploader in Control Designer

16 posts, 0 answered
  1. fregas baratis
    fregas baratis avatar
    185 posts
    Registered:
    14 Nov 2002
    24 Jun 2011
    Link to this post
    I am trying to add an image uploader and selector to a Control Designer for a custom widget i've built following this tutorial:

    http://www.sitefinity.com/40/help/developers-guide/sitefinity-essentials-controls-working-with-control-designers-creating-a-simple-control-designers.html

    I have the selector in there fine, but I don't know how to add an uploader so that any images uploaded go into the library.  The media selector works great using this code:

        <sf:MediaContentSelectorView
            id="selectorView"
            runat="server"
            ContentType="Telerik.Sitefinity.Libraries.Model.Image"
            ParentType="Telerik.Sitefinity.Libraries.Model.Album"
            LibraryBinderServiceUrl="~/Sitefinity/Services/Content/AlbumService.svc/"
            MediaContentBinderServiceUrl="~/Sitefinity/Services/Content/ImageService.svc/"
            MediaContentItemsListDescriptionTemplate="Telerik.Sitefinity.Resources.Templates.Designers.Libraries.Images.ImageItemDescriptionTemplate.htm"
            DisplayResizingOptionsControl="false"
            ShowOpenOriginalSizeCheckBox="false">
        </sf:MediaContentSelectorView>


    I tried something similar using the MediaContentUploaderView but keep getting errors.  Is this the right control and is there an example of how to use it somewhere?  I get object reference errors using the code below:



        <sf:MediaContentUploaderView ID="Foo2" runat="server"  LibraryName="Default"   ContentType="Telerik.Sitefinity.Libraries.Model.Image"     ParentType="Telerik.Sitefinity.Libraries.Model.Album"   >
            <LayoutTemplate>   
                <sf:TextField runat=server ID="altTextField" >
                    <LayoutTemplate></LayoutTemplate>
                </sf:TextField>
                <sf:TextField runat=server ID="titleTextField" >
                    <LayoutTemplate></LayoutTemplate>
                </sf:TextField>
                <sf:ResizingOptionsControl runat="server" ID="resizingOptionsControl">
                    <LayoutTemplate></LayoutTemplate>
                </sf:ResizingOptionsControl>
                <asp:TextBox runat="server" ID="whichItemToUploadLabel"></asp:TextBox>            
            </LayoutTemplate>        
        </sf:MediaContentUploaderView>


    Object reference not set to an instance of an object.

    Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

    Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.

    Source Error:

    An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

    Stack Trace:

    [NullReferenceException: Object reference not set to an instance of an object.]
       Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers.MediaContentUploaderView.InitializeControls(GenericContainer container) +242
       Telerik.Sitefinity.Web.UI.SimpleView.CreateChildControls() +58
       System.Web.UI.Control.EnsureChildControls() +102
       System.Web.UI.Control.PreRenderRecursiveInternal() +42
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +2496
    


  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    27 Jun 2011
    Link to this post
    Hi fregas,

    Please take a look at this forum post.

    Greetings,
    Ivan Dimitrov
    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. fregas baratis
    fregas baratis avatar
    185 posts
    Registered:
    14 Nov 2002
    27 Jun 2011
    Link to this post
    Do you have a code example somewhere for this?  I'm just getting errors such as:

    I used the thread you posted and set the properties for the uploader, but to no avail. 

    A required control was not found in the template for "". The control must be assignable form type "System.Web.UI.ITextControl" and must have ID "librarySelectorTitle".

    Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

    Exception Details: Telerik.Sitefinity.Web.UI.TemplateException: A required control was not found in the template for "". The control must be assignable form type "System.Web.UI.ITextControl" and must have ID "librarySelectorTitle".

    Source Error:

    An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

    Stack Trace:

    [TemplateException: A required control was not found in the template for "". The control must be assignable form type "System.Web.UI.ITextControl" and must have ID "librarySelectorTitle".]
       Telerik.Sitefinity.Web.UI.GenericContainer.ThrowException(Type requiredType, String controlId) +58
       Telerik.Sitefinity.Web.UI.GenericContainer.GetControl(String id, Boolean required) +212
       Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers.MediaContentUploaderView.get_LibrarySelectorTitle() +42
       Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers.MediaContentUploaderView.InitializeControls(GenericContainer container) +296
       Telerik.Sitefinity.Web.UI.SimpleView.CreateChildControls() +58
       System.Web.UI.Control.EnsureChildControls() +102
       System.Web.UI.Control.PreRenderRecursiveInternal() +42
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +2496
    


    Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.1
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    28 Jun 2011
    Link to this post
    Hi fregas ,

    The code sample is inside the form post I gave you. In the template you should declare

    <sf:MediaContentUploaderView id="uploaderView" runat="server"></sf:MediaContentUploaderView>

    There is a label control

    <asp:Label ID="librarySelectorTitle" runat="server" CssClass="sfTxtLbl" AssociatedControlID="librariesDropDown" />

    which is declared in the uploader template as embedded resource.

    What are the steps for replicating the error you are getting?

    Regards,
    Ivan Dimitrov
    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. fregas baratis
    fregas baratis avatar
    185 posts
    Registered:
    14 Nov 2002
    28 Jun 2011
    Link to this post
    I tried the code you sent me but it gave me the error i sent you.  Heres the code for the widget's designer files i'm working on.  Let me know if you need the widget code too. 

    // couponcalloutdesigner.cs
     
    using System;
    using System.Linq;
    using System.Web.UI;
    using System.Collections.Generic;
    using Telerik.Sitefinity.Localization;
    using Telerik.Sitefinity.Modules.Libraries.Images;
    using Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers;
    using Telerik.Sitefinity.Web.UI.ControlDesign;
     
    namespace Enilon.Luna.Web.CustomControls
    {
        public class CouponCalloutDesigner : ControlDesignerBase
        {
     
            protected MediaContentUploaderView UploaderView;
     
            protected override void InitializeControls(Telerik.Sitefinity.Web.UI.GenericContainer container)
            {
                base.DesignerMode = ControlDesignerModes.Simple;
     
                var contentType = typeof(Telerik.Sitefinity.Libraries.Model.Image).FullName;
                var parentType = typeof(Telerik.Sitefinity.Libraries.Model.Album).FullName;
                // var libraryBinderServiceUrl = "~/Sitefinity/Services/Content/AlbumService.svc/";
                //var mediaContentBinderServiceUrl = "~/Sitefinity/Services/Content/ImageService.svc/";
                var itemsName = Res.Get<ImagesResources>().Images;
                var itemName = Res.Get<ImagesResources>().Image;
                var itemNameWithArticle = Res.Get<ImagesResources>().ImageWithArticle;
                var libName = Res.Get<ImagesResources>().Album;
                //var template = "Telerik.Sitefinity.Resources.Templates.Designers.Libraries.Images.ImageItemDescriptionTemplate.htm";
                var displayAltTextField = true;
                var displayTitleTextField = true;
                var displayResizingOptionsControl = true;
                var showOpenOriginalSizeCheckBox = true;
     
     
                this.UploaderView = (MediaContentUploaderView)this.Container.FindControl("UploaderView");
     
     
                this.UploaderView.ContentType = contentType;
                this.UploaderView.ParentType = parentType;
                this.UploaderView.LibraryName = libName;
                this.UploaderView.ItemsName = itemsName;
                this.UploaderView.ItemName = itemName;
                this.UploaderView.ItemNameWithArticle = itemNameWithArticle;
                this.UploaderView.DisplayAltTextField = displayAltTextField;
                this.UploaderView.DisplayTitleTextField = displayTitleTextField;
                this.UploaderView.DisplayResizingOptionsControl = displayResizingOptionsControl;
                this.UploaderView.ShowOpenOriginalSizeCheckBox = showOpenOriginalSizeCheckBox;
     
            }
     
            protected override string LayoutTemplateName
            {
                get
                {
                    return "Enilon.Luna.Web.CustomControls.CouponCalloutDesignerTemplate.ascx";
                }
            }
     
            public override IEnumerable<ScriptDescriptor> GetScriptDescriptors()
            {
                var scriptDescriptors = new List<ScriptDescriptor>(base.GetScriptDescriptors());
                var desc = (ScriptControlDescriptor)scriptDescriptors.Last();
                desc.AddComponentProperty("selectorView", SelectorView.ClientID);
                return scriptDescriptors.ToArray();
            }
     
            public override IEnumerable<System.Web.UI.ScriptReference> GetScriptReferences()
            {
                var res = new List<ScriptReference>(base.GetScriptReferences());
                var assemblyName = this.GetType().Assembly.GetName().ToString();
                res.Add(new ScriptReference("Enilon.Luna.Web.CustomControls.CouponCalloutDesigner.js", assemblyName));
                return res.ToArray();
            }
     
            protected virtual MediaContentSelectorView SelectorView
            {
                get
                {
                    return this.Container.GetControl<MediaContentSelectorView>("selectorView", true);
                }
            }
        }
    }

    // couponcalloutdesignertemplate.ascx
     
    <%--This file is an embedded resource as required by Sitefinity 4.  You must recompile to see changes--%>
     
    <%@ Control Language="C#" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers" TagPrefix="sf" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sf" %>
     
    <div>
        <label for="txtCouponText">Text:</label>
        <input type="text" id="txtCouponText" />
        <br />
     
        <label for="coupon">Coupon:</label>            a
        <sf:MediaContentSelectorView
            id="selectorView"
            runat="server"
            ContentType="Telerik.Sitefinity.Libraries.Model.Image"
            ParentType="Telerik.Sitefinity.Libraries.Model.Album"
            LibraryBinderServiceUrl="~/Sitefinity/Services/Content/AlbumService.svc/"
            MediaContentBinderServiceUrl="~/Sitefinity/Services/Content/ImageService.svc/"
            MediaContentItemsListDescriptionTemplate="Telerik.Sitefinity.Resources.Templates.Designers.Libraries.Images.ImageItemDescriptionTemplate.htm"
            DisplayResizingOptionsControl="false"
            ShowOpenOriginalSizeCheckBox="false">
        </sf:MediaContentSelectorView>
     
     
      <sf:MediaContentUploaderView ID="UploaderView" runat="server"  ContentType="Telerik.Sitefinity.Libraries.Model.Image"     ParentType="Telerik.Sitefinity.Libraries.Model.Album"   >
            <LayoutTemplate>  
                <sf:TextField runat=server ID="altTextField" >
                    <LayoutTemplate></LayoutTemplate>
                </sf:TextField>
                <sf:TextField runat=server ID="titleTextField" >
                    <LayoutTemplate></LayoutTemplate>
                </sf:TextField>
                <sf:ResizingOptionsControl runat="server" ID="resizingOptionsControl">
                    <LayoutTemplate></LayoutTemplate>
                </sf:ResizingOptionsControl>
                <asp:TextBox runat="server" ID="whichItemToUploadLabel"></asp:TextBox>           
            </LayoutTemplate>       
        </sf:MediaContentUploaderView>
     
     
     
    </div>

    // CouponCalloutdesigner.js
     
    //This file is an embedded resource as required by Sitefinity 4.  You must recompile to see changes
     
    Type.registerNamespace("Enilon.Luna.Web.CustomControls");
     
    Enilon.Luna.Web.CustomControls.CouponCalloutDesigner = function (element) {
        this._selectorView = null;
        this._itemSelectDelegate = null;
     
        Enilon.Luna.Web.CustomControls.CouponCalloutDesigner.initializeBase(this, [element]);
    }
     
    Enilon.Luna.Web.CustomControls.CouponCalloutDesigner.prototype = {
        initialize: function () {
            Enilon.Luna.Web.CustomControls.CouponCalloutDesigner.callBaseMethod(this, 'initialize');
            this._itemSelectDelegate = Function.createDelegate(this, this._itemSelect);
            this._selectorView.add_onItemSelectCommand(this._itemSelectDelegate);
     
            var controlData = this.get_controlData();
            jQuery("#txtCouponText").val(controlData.CouponText);
        },
        dispose: function () {
            Enilon.Luna.Web.CustomControls.CouponCalloutDesigner.callBaseMethod(this, 'dispose');
     
            if (this._selectorView) {
                this._selectorView.add_onItemSelectCommand(this._itemSelectDelegate);
            }
        },
        refreshUI: function () {
            var data = this._propertyEditor.get_control();
        },
        applyChanges: function () {
            // Set value of control to the values selected in the popup
            var controlData = this.get_controlData();
            controlData.CouponText = jQuery("#txtCouponText").val();
        },
        get_selectorView: function () {
            return this._selectorView;
        },
        set_selectorView: function (value) {
            this._selectorView = value;
        },
        _itemSelect: function (sender, args) {
            var dataItem = args.get_dataItem();
        },
        add_onItemSelectCommand: function (delegate) {
            this.get_events().addHandler('onItemSelectCommand', delegate);
        }
    }
    Enilon.Luna.Web.CustomControls.CouponCalloutDesigner.registerClass('Enilon.Luna.Web.CustomControls.CouponCalloutDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);
    if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    29 Jun 2011
    Link to this post
    Hi fregas,

    Unfortunately, I am not able to replicate this issue with the latest official release.

    All the best,
    Ivan Dimitrov
    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. fregas baratis
    fregas baratis avatar
    185 posts
    Registered:
    14 Nov 2002
    29 Jun 2011
    Link to this post
    This is not with the latest release--it is Sitefinity 4.0.  Not sure if that makes a difference.  Is there anyone who can help me with this?  I am supposed to have this done today.

    Also, once they select the image from the image manager, how do I pull the image out so i can get its Url, Thumbnail, etc. for use on my custom widget?

    Thanks,
    Craig
  8. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    29 Jun 2011
    Link to this post
    Hello fregas,

    Please use the latest version. There are major fixes since 1098. The way that templates are loaded is also changed.

    You can get the object id - the dataitem ID and resolve it later with LibrariesManager using Media Modules API. you can also resolve the link by writing a helper js function that is called inside applyChanges

    Kind regards,
    Ivan Dimitrov
    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
  9. fregas baratis
    fregas baratis avatar
    185 posts
    Registered:
    14 Nov 2002
    29 Jun 2011
    Link to this post
    Ivan,

    Unfortunately, we cannot upgrade at this point as we don't have the time/budget from the client.  Clients really don't like hearing that we have to charge them for development time to upgrade sitefinity so that things that should already work actually do.  So i guess we need to tell him that this will have to wait until we upgrade?

    Thanks for the help on the modules API--exactly what i needed. 
  10. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    29 Jun 2011
    Link to this post
    Hello fregas,

    You can install a blank project or LIB and demonstrate the functionality to your customer so it is possible that he decide to upgrade the project and you will be able to keep working taking the benefit of the upgrade and new fixes.

    Regards,
    Ivan Dimitrov
    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
  11. Huda
    Huda avatar
    8 posts
    Registered:
    30 Jul 2012
    20 Jul 2011
    Link to this post
    I have a multiview custom control, One of the views is a list of text fields, another view allows the user to upload an image from his computer using the MediaContentUploaderView control, and the next allows the user to select an image that's already been uploaded, using MediaContentSelectorView control.

    I am able to get/ set the fields from the first View, and get the selected image from the third view.. However, I'm not sure what I am supposed to do in the javascript file for the second view.  Every time I browse my computer and select an image to upload, it then pops up the list of Albums I want to add the image to, and then when I click "Save", it does nothing. 

    This is my JS file right now:

    Type._registerScript(

     

    "GrayBoxControlDesignerView2.js", ["IDesignerViewControl.js"]);

    Type.registerNamespace(

     

    "CustomControls.Designer.Views.GrayBox");

    CustomControls.Designer.Views.GrayBox.GrayBoxControlDesignerView2 =

     

    function (element) {

    CustomControls.Designer.Views.GrayBox.GrayBoxControlDesignerView2.initializeBase(

     

    this, [element]);

    }

    CustomControls.Designer.Views.GrayBox.GrayBoxControlDesignerView2.prototype = {

    initialize:

     

    function () {

    CustomControls.Designer.Views.GrayBox.GrayBoxControlDesignerView2.callBaseMethod(

     

    this, 'initialize');

    },

    dispose:

     

    function () {

    CustomControls.Designer.Views.GrayBox.GrayBoxControlDesignerView2.callBaseMethod(

     

    this, 'dispose');

    },

     

    // implementation of IDesignerViewControl: Forces the control to refersh from the control Data

    refreshUI:

     

    function () {

     

    var controlData = this.get_controlData();

    },

     

    // implementation of IDesignerViewControl: forces the designer view to apply the changes on UI to the control Data

    applyChanges:

     

    function () {

     

    var controlData = this.get_controlData();

    },

     

    // gets the javascript control object that is being designed

    get_controlData:

     

    function () {

     

    return this.get_parentDesigner().get_propertyEditor().get_control();

    },

    get_parentDesigner:

     

    function () {

     

    return this._parentDesigner;

    },

     

    // IDesignerViewControl: sets the reference fo the propertyEditor control

    set_parentDesigner:

     

    function (value) {

     

    this._parentDesigner = value;

    }

    }

    CustomControls.Designer.Views.GrayBox.GrayBoxControlDesignerView2.registerClass(

     

    'CustomControls.Designer.Views.GrayBox.GrayBoxControlDesignerView2', Sys.UI.Control, Telerik.Sitefinity.Web.UI.ControlDesign.IDesignerViewControl);

    if

     

     

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


    This is the JS file to the third view, which allows the user to select an image that has already been uploaded, and sets it to the Image.  This works just fine.  Do I need to add the itemSelectDelegate/ itemSelect function to my JS file above as I did below?

     

    Type._registerScript(

     

    "GrayBoxControlDesignerView3.js", ["IDesignerViewControl.js"]);

    Type.registerNamespace(

     

    "CustomControls.Designer.Views.GrayBox");

    var

     

     

    selectedImageUrl = "";

    CustomControls.Designer.Views.GrayBox.GrayBoxControlDesignerView3 =

     

    function (element) {

    CustomControls.Designer.Views.GrayBox.GrayBoxControlDesignerView3.initializeBase(

     

    this, [element]);

     

    this._selectorView = null;

     

    this._itemSelectDelegate = null;

    }

    CustomControls.Designer.Views.GrayBox.GrayBoxControlDesignerView3.prototype = {

    initialize:

     

    function () {

    CustomControls.Designer.Views.GrayBox.GrayBoxControlDesignerView3.callBaseMethod(

     

    this, 'initialize');

     

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

     

    this._selectorView.add_onItemSelectCommand(this._itemSelectDelegate);

    },

    dispose:

     

    function () {

    CustomControls.Designer.Views.GrayBox.GrayBoxControlDesignerView3.callBaseMethod(

     

    this, 'dispose');

     

    if (this._selectorView) {

     

    this._selectorView.add_onItemSelectCommand(this._itemSelectDelegate);

    }

    },

     

    //properties

    get_selectorView:

     

    function () {

     

    return this._selectorView;

    },

    set_selectorView:

     

    function (value) {

     

    this._selectorView = value;

    },

    _itemSelect:

     

    function (sender, args) {

     

    var dataItem = args.get_dataItem();

    selectedImageUrl = dataItem.MediaUrl;

    },

     

    // implementation of IDesignerViewControl: Forces the control to refersh from the control Data

    refreshUI:

     

    function () {

     

    var controlData = this.get_controlData();

    selectedImageUrl = controlData.ImageURL;

    },

     

    // implementation of IDesignerViewControl: forces the designer view to apply the changes on UI to the control Data

    applyChanges:

     

    function () {

     

    var controlData = this.get_controlData();

    controlData.ImageURL = selectedImageUrl;

    },

     

    // gets the javascript control object that is being designed

    get_controlData:

     

    function () {

     

    return this.get_parentDesigner().get_propertyEditor().get_control();

    },

    get_parentDesigner:

     

    function () {

     

    return this._parentDesigner;

    },

     

    // IDesignerViewControl: sets the reference fo the propertyEditor control

    set_parentDesigner:

     

    function (value) {

     

    this._parentDesigner = value;

    }

    }

    CustomControls.Designer.Views.GrayBox.GrayBoxControlDesignerView3.registerClass(

     

    'CustomControls.Designer.Views.GrayBox.GrayBoxControlDesignerView3', Sys.UI.Control, Telerik.Sitefinity.Web.UI.ControlDesign.IDesignerViewControl);

    if

     

     

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


    Please let me know.

    Thanks!

     

     

     

  12. Huda
    Huda avatar
    8 posts
    Registered:
    30 Jul 2012
    20 Jul 2011
    Link to this post
    Also,

    I would like to add a view that has the a Content Editor (what is shown in Content Block widget).  What control would I use for this, and what namespace does it belong to? Please let me know ASAP.

    Thanks!!
  13. Huda
    Huda avatar
    8 posts
    Registered:
    30 Jul 2012
    20 Jul 2011
    Link to this post
    Also, with the Content Editor (Content Block), please let me know how to hook up the JS file with it (applyChanges and refreshUI)... I feel that the documentation lacks a lot of how to use some of the Designer controls & how to hook up the JS files..
    Thanks.
  14. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    06 Dec 2016
    21 Jul 2011
    Link to this post
    Hi Huda,

    To your first question: javascript files provide the functionality of the designer. You need to make their build action to Embeded resource and register them in Assemblyinfo.cs
    [assembly: WebResourceAttribute("DatePicker.DatePickerDesignerView.js", "text/javascript")]
    Please refer to DatePicker sample in the SDK.
    Examine the DatePickerDesignerView.js
    DatePicker.DatePickerDesignerView.registerClass('DatePicker.Designer.Views.DatePickerDesignerView', Sys.UI.Control, Telerik.Sitefinity.Web.UI.ControlDesign.IDesignerViewControl);
    This is how you register the javascript.
    Whenever you click save changes the applyChanges JS method is raised. You should put the logic for passing the data down to the control in your custom client side component of the designer' applyChanges method. Please take a look at this article for building the date picker control.


    To your second question: the control you seek is RadEditor it is a Telerik control and it is loaded from Telerik.Web.UI

    To your third question: The JS file for the Contentblock designer should look like
    Type.registerNamespace("Telerik.Sitefinity.Modules.GenericContent.Web.UI");
     
    Telerik.Sitefinity.Modules.GenericContent.Web.UI.ContentBlockDesignerBase = function (element) {
        this._propertyEditor = null;
        this._htmlEditor = null;
        Telerik.Sitefinity.Modules.GenericContent.Web.UI.ContentBlockDesignerBase.initializeBase(this, [element]);
    }
    Telerik.Sitefinity.Modules.GenericContent.Web.UI.ContentBlockDesignerBase.prototype = {
        initialize: function () {
            Telerik.Sitefinity.Modules.GenericContent.Web.UI.ContentBlockDesignerBase.callBaseMethod(this, 'initialize');
        },
        dispose: function () {
            Telerik.Sitefinity.Modules.GenericContent.Web.UI.ContentBlockDesignerBase.callBaseMethod(this, 'dispose');
        },
        applyChanges: function () {
            var editor = this._htmlEditor._editControl;
            
            if (editor) {
                editor.set_mode(1);
            }
     
            this.get_propertyEditor().get_control().Html = this._htmlEditor.get_value();
        },
     
        refreshUI: function () {
            var html = this.get_propertyEditor().get_control().Html;
            if (html) {
                this._htmlEditor.set_value(html);
            }
        },
        get_propertyEditor: function () {
            return this._propertyEditor;
        },
        set_propertyEditor: function (value) {
            this._propertyEditor = value;
        },
        get_htmlEditor: function () {
            return this._htmlEditor;
        },
       
        set_htmlEditor: function (value) {
            this._htmlEditor = value;
        }
    };
    Telerik.Sitefinity.Modules.GenericContent.Web.UI.ContentBlockDesignerBase.registerClass('Telerik.Sitefinity.Modules.GenericContent.Web.UI.ContentBlockDesignerBase', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);


    Regards,
    Stanislav Velikov
    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
  15. Huda
    Huda avatar
    8 posts
    Registered:
    30 Jul 2012
    21 Jul 2011
    Link to this post
    Hi,

    Thanks for your response.  I actually already figured out the Content Block/ the JS that goes with that and have that all hooked up and working, Thanks. 

    Regarding the Image Selector, I already built all my custom controls according to the Date Picker example.  I already have the necessary files set to Embed Resource and have them registered in the AssemblyInfo.cs... This wasn't my question, as I already am able to build out all sorts of custom controls.  What I did need assistance on though, was what to put in the Apply Changes section of the JS file. There is no documentation on this.  I feel like most of the code I've done , I've had to guess/ research forums, etc.  So if you could assist in how to hook up the JS file, that would be great. Right now, this is what I have:

    My template .ascx file  (Set to Embedded Resource)
    <%@ Control Language="C#" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers" TagPrefix="sf" %>
     
    <sf:MediaContentUploaderView ID="uploaderView" runat="server"  ContentType="Telerik.Sitefinity.Libraries.Model.Image"  ParentType="Telerik.Sitefinity.Libraries.Model.Album">
         
    </sf:MediaContentUploaderView>


    My .cs File
    using System.Linq;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Sitefinity.Web.UI;
    using System.Collections.Generic;
    using Telerik.Web.UI;
    using Telerik.Sitefinity.Web.UI.ControlDesign;
    using Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers;
    using Telerik.Sitefinity.Modules.Libraries.Images;
    using Telerik.Sitefinity.Localization;


    namespace CustomControls.Designer.Views.PageHeader
    {
        class PageHeaderDesignerView : ContentViewDesignerView
        {
            public override string ViewTitle
            {
                get
                {
                    return "Image – Upload new";
                }
            }

            public override string ViewName
            {
                get
                {
                    return this.GetType().Name;
                }
            }

            protected virtual MediaContentUploaderView UploaderView
            {
                get
                {
                    return this.Container.GetControl<MediaContentUploaderView>("uploaderView", true);
                }
            }

            public override IEnumerable<ScriptDescriptor> GetScriptDescriptors()
            {
                var descriptor = new ScriptControlDescriptor(typeof(PageHeaderDesignerView).FullName, this.ClientID);
                descriptor.AddComponentProperty("selectorView", this.UploaderView.ClientID);

                return new[] { descriptor };
            }

            public override IEnumerable<ScriptReference> GetScriptReferences()
            {
                return new List<ScriptReference>()
                {
                   new ScriptReference("Telerik.Sitefinity.Web.UI.ControlDesign.Scripts.IDesignerViewControl.js",
                                         typeof(Telerik.Sitefinity.Web.UI.Fields.TextField).Assembly.GetName().ToString()),
                    new ScriptReference("CustomControls.Designer.Views.PageHeader.PageHeaderDesignerView.js", typeof(PageHeaderDesignerView).Assembly.GetName().ToString())
                };
            }

            protected override string LayoutTemplateName
            {
                get
                {
                    return "CustomControls.Designer.Views.PageHeader.PageHeaderDesignerView.ascx";
                }
            }

            protected override void InitializeControls(GenericContainer container)
            {
                string itemsName = Res.Get<ImagesResources>().Images;
                string itemName = Res.Get<ImagesResources>().Image;
                string itemNameWithArticle = Res.Get<ImagesResources>().ImageWithArticle;
                string libName = Res.Get<ImagesResources>().Album;

                this.UploaderView.LibraryName = libName;
                this.UploaderView.ItemsName = itemsName;
                this.UploaderView.ItemName = itemName;
                this.UploaderView.ItemNameWithArticle = itemNameWithArticle;
                this.UploaderView.DisplayAltTextField = false;
                this.UploaderView.DisplayTitleTextField = false;
                this.UploaderView.DisplayResizingOptionsControl = false;
                this.UploaderView.ShowOpenOriginalSizeCheckBox = false;
            }

            protected override HtmlTextWriterTag TagKey
            {
                get
                {
                    //we use div wrapper tag to make easier common styling
                    return HtmlTextWriterTag.Div;
                }
            }
        }
    }


    My .js file (set to Embedded Resource) ******************THIS IS WHAT I NEED HELP ON*************************************
    Type._registerScript("PageHeaderDesignerView.js", ["IDesignerViewControl.js"]);
    Type.registerNamespace("CustomControls.Designer.Views.PageHeader");

    CustomControls.Designer.Views.PageHeader.PageHeaderDesignerView = function (element) {
        CustomControls.Designer.Views.PageHeader.PageHeaderDesignerView.initializeBase(this, [element]);        
            this._selectorView = null;
    }

    CustomControls.Designer.Views.PageHeader.PageHeaderDesignerView.prototype = {
        initialize: function () {
            CustomControls.Designer.Views.PageHeader.PageHeaderDesignerView.callBaseMethod(this, 'initialize');

        },
        dispose: function () {
            CustomControls.Designer.Views.PageHeader.PageHeaderDesignerView.callBaseMethod(this, 'dispose');
        },

        get_selectorView: function () {
            return this._selectorView;
        },
        set_selectorView: function (value) {
            this._selectorView = value;
        },

        // implementation of IDesignerViewControl: Forces the control to refersh from the control Data
        refreshUI: function () {
            var controlData = this.get_controlData();
        },

        // implementation of IDesignerViewControl: forces the designer view to apply the changes on UI to the control Data
        applyChanges: function () {
            var controlData = this.get_controlData();
        },

        // gets the javascript control object that is being designed
        get_controlData: function () {
            return this.get_parentDesigner().get_propertyEditor().get_control();
        },
        get_parentDesigner: function () {
            return this._parentDesigner;
        },

        // IDesignerViewControl: sets the reference fo the propertyEditor control
        set_parentDesigner: function (value) {
            this._parentDesigner = value;
        }
    }

    CustomControls.Designer.Views.PageHeader.PageHeaderDesignerView.registerClass('CustomControls.Designer.Views.PageHeader.PageHeaderDesignerView', Sys.UI.Control, Telerik.Sitefinity.Web.UI.ControlDesign.IDesignerViewControl);

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


    I'd like the image to be uploaded once I click "Save".. and I'd like that image that was just updated to be set to the Image URL property of the control data (controlData.ImageURL).  So I need help with the applyChanges function, and any other functions I need to add....

    I have another view in this control with the MediaContentSelectorView and I hooked all of that up, and I have another view with the ContentBlock editor, and other text fields, and that's all hooked up, I'm just unsure on the Javascript of the Image Selector, which is what I need help on... Again, I already know how to hook everything up in terms of the Embedded Resources, the AssemblyInfo.cs, the Control Data, etc. as I have built several custom controls with designers. Just need help on the JS.

    Thanks!
  16. Anthony
    Anthony avatar
    17 posts
    Registered:
    21 May 2003
    05 Oct 2012
    Link to this post
    Hi Guys,

    Did any of you actually get this upload designer working, there is still very little documentation online, if so any chance you could post up your working script, particuarly the .js side?

    Hope you can help

    Cheers
    Anthony
16 posts, 0 answered