More in this section

Forums / General Discussions / HTMLField Custom Designer View

HTMLField Custom Designer View

4 posts, 0 answered
  1. Carlos Redondo
    Carlos Redondo avatar
    21 posts
    Registered:
    09 Jan 2009
    11 Feb 2012
    Link to this post
    Hi All,
    I'm almost done with my custom View Designer... I'm using a HTMLField Editor as shown below:

    <%@ Control Language="C#" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sf" %>
    <%@ Register Assembly="Telerik.Sitefinity" TagPrefix="designers" Namespace="Telerik.Sitefinity.Web.UI.ControlDesign" %>
    <div id="editView" class="sfContentBlocksDesignerWrp">
    <sf:FormManager id="formManager" runat="server">
        <sf:HtmlField
            ID="webToLeadDisplay"
            runat="server"
            Width="99%"
            Height="370px"
            EditorContentFilters="DefaultFilters"
            EditorStripFormattingOptions="MSWord,Css,Font,Span,ConvertWordLists"
            DisplayMode="Write"
            FixCursorIssue="True">
        </sf:HtmlField>
    </sf:FormManager>
    </div>

    and javascript file for set/get 

    Type.registerNamespace("Premier.SalesForce.Designer");
     
    // ------------------------------------------------------------------------
    // Designer class for the like button control
    // ------------------------------------------------------------------------
     
    Premier.SalesForce.Designer.WebToLeadViewDesigner = function (element) {
     
        Premier.SalesForce.Designer.WebToLeadViewDesigner.initializeBase(this, [element]);
        this._propertyEditor = null;
        this._controlData = null;
        this._webToLeadDisplayControl = null;
    }
     
    Premier.SalesForce.Designer.WebToLeadViewDesigner.prototype = {
     
        /* --------------------------------- set up and tear down --------------------------------- */
     
        initialize: function () {
            this.refreshUI();
            Premier.SalesForce.Designer.WebToLeadViewDesigner.callBaseMethod(this, 'initialize');
     
        },
     
        dispose: function () {
     
            Premier.SalesForce.Designer.WebToLeadViewDesigner.callBaseMethod(this, 'dispose');
        },
     
        /* --------------------------------- public methods --------------------------------- */
     
        // refereshed the user interface. Call this method in case underlying control object
        // has been changed somewhere else then through this desinger.
        refreshUI: function () {
            var controlData = this.get_controlData();
     
            if (this.get_controlData().WebToLeadContent != null) {
                $find(this.get_webToLeadDisplayControl().id).get_editControl().set_html(this.get_controlData().WebToLeadContent);
            }
     
        },
     
        // once the data has been modified, call this method to apply all the changes made
        // by this designer on the underlying control object.
        applyChanges: function () {
            this.get_controlData().WebToLeadContent = $find(this.get_webToLeadDisplayControl().id).get_editControl().get_html();
     
        },
      
        // gets the javascript control object that is being designed
        get_controlData: function () {
            return this.get_propertyEditor().get_control();
        },
     
        // gets the reference to the propertyEditor control
        get_propertyEditor: function () {
            return this._propertyEditor;
        },
        // sets the reference fo the propertyEditor control
        set_propertyEditor: function (value) {
            this._propertyEditor = value;
        },
        // gets the reference to the HTML Editor of the designer
        get_webToLeadDisplayControl: function () {
            return this._webToLeadDisplayControl;
        },
        // sets the reference to the HTML Editor of the designer
        set_webToLeadDisplayControl: function (value) {
            this._webToLeadDisplayControl = value;
        }
    }
     
    Premier.SalesForce.Designer.WebToLeadViewDesigner.registerClass('Premier.SalesForce.Designer.WebToLeadViewDesigner', Sys.UI.Control, Telerik.Sitefinity.Web.UI.ControlDesign.IControlDesigner);


    The issue I'm facing right now is when javascript tries to set the HTML value from my custom control ( refreshUI: function()) to the Designer View control (HTMLField).  It looks like, based on javascript debug, that editor control is null at the moment when refreshUI function is executed.  

    Comment: applyChanges function() works perfectly!
    Any idea what could be wrong?

    Thanks
    Carlos.
  2. Svetoslav Petsov
    Svetoslav Petsov avatar
    456 posts
    Registered:
    24 Sep 2012
    15 Feb 2012
    Link to this post
    Hi Carlos,

     This seems like a strange behaviour. Have you tried to perform a null check for the HtmlField, as well here:

    refreshUI: function () {
            var controlData = this.get_controlData();
     
            if (this.get_controlData().WebToLeadContent != null) {
                $find(this.get_webToLeadDisplayControl().id).get_editControl().set_html(this.get_controlData().WebToLeadContent);
            }
     
        },
     Sometimes the javascript is executed twice (for different modes) and for one of them the field is not yet initialized, so you need to perform checks either for the mode or for a null value. 

    Kind regards,
    Svetoslav Petsov
    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. Carlos Redondo
    Carlos Redondo avatar
    21 posts
    Registered:
    09 Jan 2009
    16 Feb 2012
    Link to this post
    Hi Svetoslav,
    Thanks for your reply, I found an issue on my designer html and within javascript.  First at all, I noticed that I had the call for refreshUI method within the initialize method, and it must be call automatically by the core, so I removed it from my javascript, but then I noticed that refreshUI method wasn't executed at all during web designer initialization, so I reviewed multiples samples and I found a good one here and then I understood that FormManager tag shouldn't wrap the HtmlField control.

    Now refreshUI method works as expected and HtmlField control is valid.

    Thanks
    Carlos.

  4. Svetoslav Petsov
    Svetoslav Petsov avatar
    456 posts
    Registered:
    24 Sep 2012
    17 Feb 2012
    Link to this post
    Hello Carlos,

     I'm glad that your issue was resolved. Let me know if you need further help with this.

    Regards,
    Svetoslav Petsov
    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
4 posts, 0 answered