Custom Widget Designer - Add a Sitefinity HtmlField (or RadTextEditor) - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

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

  • Custom Widget Designer - Add a Sitefinity HtmlField (or RadTextEditor)
  • 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;
  • 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???
  • 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);
  • 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.
  • 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;
            
  • 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
  • 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.
  • I am glad the solution works for you.
    Happy Coding!
  • 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
  • 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.



  • 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;

  • Sorry - Gina, I meant my post. I was still logged on as the wrong person.
  • Hi all,

    Can someone just answer the following question for me please?

    What control is used in order to display the content saved from the HtmlField on the template?