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

Forums / Developing with Sitefinity / Custom Widget Designer - Add a Sitefinity HtmlField (or RadTextEditor)

Custom Widget Designer - Add a Sitefinity HtmlField (or RadTextEditor)

12 posts, 0 answered
  1. Darrin Robertson
    Darrin Robertson avatar
    105 posts
    Registered:
    18 Jul 2004
    27 Jul 2013
    Link to this post
    Can anyone point me to a working example of having the HtmlField implemented on a Custom widget.
    I have my HtmlField on the ascx file, the references in the cs but I am unsure how to implement the js.

    Can any one help?

    <sfFields:HtmlField
        ID="Description"
        runat="server"
        DisplayMode="Write"
        EditorToolsConfiguration="Forums"
        HtmlFieldEditModes="Design"
        EditorContentFilters="DefaultFilters,RemoveScripts"
        EditorStripFormattingOptions="AllExceptNewLines"
        Height="200"
        Width="750"
        IsToOverrideDialogs="false">
    </sfFields:HtmlField>
    protected virtual HtmlField Description
            {
                get
                {
                    return this.Container.GetControl<HtmlField>("Description", true);
                }
            }
    public override System.Collections.Generic.IEnumerable<System.Web.UI.ScriptDescriptor> GetScriptDescriptors()
            {
                var scriptDescriptors = new List<ScriptDescriptor>(base.GetScriptDescriptors());
                var descriptor = (ScriptControlDescriptor)scriptDescriptors.Last();
     
                descriptor.AddElementProperty("title", this.Title.ClientID);
                descriptor.AddComponentProperty("description", this.Description.ClientID);
     
                return scriptDescriptors;
            }
  2. Arno
    Arno avatar
    249 posts
    Registered:
    08 Sep 2010
    27 Jul 2013 in reply to Darrin Robertson
    Link to this post
    Hi Darrin,

    The code you posted looks fine to me. Below is the section in the javascript that I use for an HTMLField in a custom widget designer (my control is called "ParagraphText" so you should replace that by "Description"):

    /* Called when the designer window gets opened and here is place to "bind" your designer to the control properties */
        refreshUI: function () {
            var controlData = this._propertyEditor.get_control(); /* JavaScript clone of your control - all the control properties will be properties of the controlData too */
     
            /* RefreshUI ParagraphText */
            /* set_value expects a string, so if ParagraphText is empty, an empty string should be provided. */
            var htmlText = controlData.ParagraphText ? controlData.ParagraphText : "";
            $find(this.get_paragraphText().id).set_value(htmlText);
        },
     
        /* Called when the "Save" button is clicked. Here you can transfer the settings from the designer to the control */
        applyChanges: function () {
            var controlData = this._propertyEditor.get_control();
     
            /* Get the RadEditor inside the HtmlField through get_editControl(), then get its content. */
            var htmlText = $find(this.get_paragraphText().id).get_editControl().get_html();
     
            controlData.ParagraphText = htmlText;
        },
     
        /* ----- properties ----- */
     
        /* ParagraphText properties */
        get_paragraphText: function () { return this._paragraphText; },
        set_paragraphText: function (value) { this._paragraphText = value; }
  3. Darrin Robertson
    Darrin Robertson avatar
    105 posts
    Registered:
    18 Jul 2004
    27 Jul 2013 in reply to Arno
    Link to this post
    Thanks very much for that info Arno
    I am getting a ".get_editControl is not a function" error message from the Refresh UI function.
    Is there something else in the script that I need???
  4. Darrin Robertson
    Darrin Robertson avatar
    105 posts
    Registered:
    18 Jul 2004
    27 Jul 2013 in reply to Darrin Robertson
    Link to this post
    Sorry it was "set_value() is not a function.
    Below is my js
    Type.registerNamespace("Pdr.Widgets.Pages");
     
    Pdr.Widgets.Pages.ContentDesigner = function (element) {
        /* Initialize Title fields */
        this._title = null;
         
        /* Initialize Description fields */
        this._description = null;
         
        /* Calls the base constructor */
        Pdr.Widgets.Pages.ContentDesigner.initializeBase(this, [element]);
    }
     
    Pdr.Widgets.Pages.ContentDesigner.prototype = {
        /* --------------------------------- set up and tear down --------------------------------- */
        initialize: function () {
            /* Here you can attach to events or do other initialization */
            Pdr.Widgets.Pages.ContentDesigner.callBaseMethod(this, 'initialize');
        },
        dispose: function () {
            /* this is the place to unbind/dispose the event handlers created in the initialize method */
            Pdr.Widgets.Pages.ContentDesigner.callBaseMethod(this, 'dispose');
        },
     
        /* --------------------------------- public methods ---------------------------------- */
     
        findElement: function (id) {
            var result = jQuery(this.get_element()).find("#" + id).get(0);
            return result;
        },
     
        /* Called when the designer window gets opened and here is place to "bind" your designer to the control properties */
        refreshUI: function () {
            var controlData = this._propertyEditor.get_control(); /* JavaScript clone of your control - all the control properties will be properties of the controlData too */
     
            /* RefreshUI Title */
            jQuery(this.get_title()).val(controlData.Title);
     
            /* RefreshUI Description */
            var htmlText = controlData.Description ? controlData.Description : "";
            jQuery(this.get_description().id).set_value(htmlText);
     
        },
     
        /* Called when the "Save" button is clicked. Here you can transfer the settings from the designer to the control */
        applyChanges: function () {
            var controlData = this._propertyEditor.get_control();
     
            /* ApplyChanges Title */
            controlData.Title = jQuery(this.get_title()).val();
     
            /* ApplyChanges Description */
            var htmlText = jQuery(this.get_description().id).get_editControl().get_html();
            controlData.Description = htmlText;
        },
     
        /* --------------------------------- event handlers ---------------------------------- */
     
        /* --------------------------------- private methods --------------------------------- */
     
        /* --------------------------------- properties -------------------------------------- */
     
        /* Title properties */
        get_title: function () { return this._title; },
        set_title: function (value) { this._title = value; },
     
        /* Description properties */
        get_description: function () { return this._description; },
        set_description: function (value) { this._description = value; }
     
    }
     
    Pdr.Widgets.Pages.ContentDesigner.registerClass('Pdr.Widgets.Pages.ContentDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);
  5. Arno
    Arno avatar
    249 posts
    Registered:
    08 Sep 2010
    27 Jul 2013 in reply to Darrin Robertson
    Link to this post
    Hi Darrin,

    In case of "set_value() is not a function" it seems that either the get_description function or the jQuery in refreshUI does not return the right object. You could try if debugging the script reveals what object it actually gets. It's weird, all looks fine to me at first glance. I was just wondering if "description" is a reserved word in field controls somehow and if it would help to rename it. If nothing else helps you could try that.
  6. Abhilash Shamsunder
    Abhilash Shamsunder avatar
    10 posts
    Registered:
    05 Apr 2010
    19 Aug 2013
    Link to this post
    Hey,
    Just in case if you have not found a solution or for other user's, here's the solution:

    STEP 1:
    Change line 2 of code from
    /* RefreshUI Description */
    var htmlText = controlData.Description ? controlData.Description : "";
    jQuery(this.get_description().id).set_value(htmlText);
    to
    /* RefreshUI Description */
    var htmlText = controlData.Description ? controlData.Description : "";
    this.get_description().set_value(htmlText);

    STEP 2:
    Change the line below
    /* ApplyChanges Description */
    var htmlText = jQuery(this.get_description().id).get_editControl().get_html();
    controlData.Description = htmlText;
    to
    /* ApplyChanges Description */
    var htmlText = this.get_description().get_value();
    controlData.Description = htmlText;

    HtmlField should now work as intended. :)

    Thanks,
    Abhilash
  7. Darrin Robertson
    Darrin Robertson avatar
    105 posts
    Registered:
    18 Jul 2004
    21 Aug 2013 in reply to Abhilash Shamsunder
    Link to this post
    Thanks Abhilash
    No I didn't have the answer. I opened a support ticket and left it there.
    I will let them know that you sorted it!

    Good work.
  8. Abhilash Shamsunder
    Abhilash Shamsunder avatar
    10 posts
    Registered:
    05 Apr 2010
    21 Aug 2013 in reply to Darrin Robertson
    Link to this post
    I am glad the solution works for you.
    Happy Coding!
  9. Stefani Tacheva
    Stefani Tacheva avatar
    718 posts
    Registered:
    06 Dec 2016
    23 Aug 2013
    Link to this post
    Hi,

    Thank you for sharing solutions with the community.

    Regards,
    Stefani Tacheva
    Telerik
    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
  10. Gina McCarty
    Gina McCarty avatar
    5 posts
    Registered:
    23 Feb 2006
    25 Oct 2013
    Link to this post
    I'm having this same issue. I have all my code in place but I don't know where  _description is defined. Where is it defined and what is its value? When I call get_description() I get a null value back. Thanks.



  11. Lewis
    Lewis  avatar
    1 posts
    Registered:
    30 Oct 2012
    25 Oct 2013 in reply to Gina McCarty
    Link to this post
    Gina - If you look at my post further up you will see it set up at the top of the designer js file as
        /* Initialize Description fields */
        this._description = null;

  12. Darrin Robertson
    Darrin Robertson avatar
    105 posts
    Registered:
    18 Jul 2004
    25 Oct 2013 in reply to Gina McCarty
    Link to this post
    Sorry - Gina, I meant my post. I was still logged on as the wrong person.
12 posts, 0 answered