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

Forums / Developing with Sitefinity / RadControl in multi-view designed widgets

RadControl in multi-view designed widgets

3 posts, 0 answered
  1. Connections Academy Developer
    Connections Academy Developer avatar
    151 posts
    Registered:
    04 May 2005
    25 Jul 2012
    Link to this post
    I am currently creating a widget that has a multiview control designer. I would like one of the editor views to contain a RadEditor, so I am using the HtmlField control in the view's template. I am running into complications while trying to instantiate the editor in the client component. Here are some excerpts from the relevant code files:

    Control Designer:
    public class MyControlDesigner : ContentViewDesignerBase {
        .
        .      
        protected override void AddViews(Dictionary<string, ControlDesignerView> views) {
            views.Add("MyControlDesignerView1", new MyControlDesignerView1());
            views.Add("MyControlDesignerView2", new MyControlDesignerView2());
        }
    }

    Template for view containing the HtmlField control: 
    <%@ Control %>
    <%@ Register Assembly="Telerik.Sitefinity" TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" %>
    <%@ Register Assembly="Telerik.Sitefinity" TagPrefix="sitefinity" Namespace="Telerik.Sitefinity.Web.UI" %>
    <%@ Register Assembly="Telerik.Sitefinity" TagPrefix="sfFields" Namespace="Telerik.Sitefinity.Web.UI.Fields" %>
     
    <sitefinity:ResourceLinks ID="resourcesLinks" runat="server">
        <sitefinity:ResourceFile Name="Styles/Ajax.css" />
        <sitefinity:ResourceFile Name="Styles/jQuery/jquery.ui.core.css" />
        <sitefinity:ResourceFile Name="Styles/jQuery/jquery.ui.dialog.css" />
        <sitefinity:ResourceFile Name="Styles/jQuery/jquery.ui.theme.sitefinity.css" />
        <sitefinity:ResourceFile Name="Styles/WIndow.css" />
    </sitefinity:ResourceLinks>
     
    <sitefinity:FormManager ID="formManager" runat="server" />
     
    <div class="sfContentViews sfSingleContentView" style="max-height: 400px; overflow: auto; ">
        <ol>       
            <li class="sfFormCtrl">
     
                <asp:Label
                    ID="Label1"
                    runat="server"
                    AssociatedControlID="contentEditor"
                    CssClass="sfTxtLbl">Content</asp:Label>
     
                <sitefinity:HtmlField
                    ID="contentEditor"
                    runat="server"
                    CssClass="sfTxt"
                    Height="650px"
                    Width="650px"
                    EditorContentFilters="DefaultFilters"/>
     
                <div class="sfExample"></div>
            </li>
        </ol>  
    </div>

    Code behind of View containing HtmlField:
    public class MyControlDesignerView1 : ContentViewDesignerView {
        .
        .
        protected virtual HtmlField contentEditor {
            get { return Container.GetControl<HtmlField>("contentEditor", false); }
        }
        .
        .
        public override IEnumerable<System.Web.UI.ScriptDescriptor> GetScriptDescriptors() {
            var descriptor = new ScriptControlDescriptor(this.GetType().FullName, this.ClientID);
            descriptor.AddComponentProperty("contentEditor", this.contentEditor.ClientID);
            return new[] { descriptor };
        }
    }

    Javascript of View containing HtmlField control:
    Type.registerNamespace("Full.Namespace.MyControl");
     
    Full.Namespace.MyControl.MyControlDesignerView1 = function (element) {
        Full.Namespace.MyControl.MyControlDesignerView1.initializeBase(this, [element]);
    }
     
    Full.Namespace.MyControl.MyControlDesignerView1.prototype = {
        initialize: function () {
            this._contentEditor = null;
            Full.Namespace.MyControl.MyControlDesignerView1.callBaseMethod(this, 'initialize');
        },
     
        dispose: function () {
            Full.Namespace.MyControl.MyControlDesignerView1.callBaseMethod(this, 'dispose');
        },
     
        refreshUI: function () {
            var controlData = this.get_controlData();
            this.get_contentEditor().set_value(controlData.Content);
        },
     
        applyChanges: function () {
            var controlData = this.get_controlData();
            controlData.Content = get_contentEditor().get_value();
        },
     
        get_controlData: function () {
            return this.get_parentDesigner().get_propertyEditor().get_control();
        },
     
        get_parentDesigner: function () {
            return this._parentDesigner;
        },
        set_parentDesigner: function (value) {
            this._parentDesigner = value;
        },
     
        get_contentEditor: function () {
            return this._contentEditor;
        },
     
        set_contentEditor: function (value) {
            this._contentEditor = value;
        }
    }

    Within the javascript, the _contentEditor property of the editor is still undefined after the initialize method is run. Am I missing steps?

    Thanks for the help,
    Matt
  2. Milan
    Milan avatar
    5 posts
    Registered:
    29 May 2009
    06 Nov 2013 in reply to Connections Academy Developer
    Link to this post
    Hi Matt,

    was your problem resolved? I have the same problem with HtmlField.

    Thanks, Milan.
  3. Ivan D. Dimitrov
    Ivan D. Dimitrov avatar
    310 posts
    Registered:
    26 Mar 2015
    11 Nov 2013
    Link to this post
    Hello guys,

     The code provided has several lines that prevent the designer from passing values to the widget. First off I would like to say that the component property is in place and everything is ok with the exception of the Designer.js. Please test the code below in order to resolve the issue:

    Type.registerNamespace("SitefinityWebApp.Designer");
     
    SitefinityWebApp.Designer.HTMLDesigner = function (element) {
        /* Initialize Message fields */
        this._message = null;
        this.contentEditor = null;
        /* Calls the base constructor */
        SitefinityWebApp.Designer.HTMLDesigner.initializeBase(this, [element]);
    }
     
    SitefinityWebApp.Designer.HTMLDesigner.prototype = {
        /* --------------------------------- set up and tear down --------------------------------- */
        initialize: function () {
            /* Here you can attach to events or do other initialization */
            SitefinityWebApp.Designer.HTMLDesigner.callBaseMethod(this, 'initialize');
        },
        dispose: function () {
            /* this is the place to unbind/dispose the event handlers created in the initialize method */
            SitefinityWebApp.Designer.HTMLDesigner.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 */
            this._contentEditor.set_value();
     
            this.get_controlData().Name = this._contentEditor.get_value();
            /* RefreshUI Message */
            jQuery(this.get_message()).val(controlData.Message);
        },
     
        /* 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 Message */
            controlData.Message = jQuery(this.get_message()).val();
            this.get_controlData().Name = this._contentEditor.get_value();
     
        },
     
        /* --------------------------------- event handlers ---------------------------------- */
     
        /* --------------------------------- private methods --------------------------------- */
     
        /* --------------------------------- properties -------------------------------------- */
     
        /* Message properties */
        get_message: function () { return this._message; },
        set_message: function (value) { this._message = value; },
     
        get_contentEditor: function () { return this._contentEditor; },
        set_contentEditor: function (value) { this._contentEditor = value; }
     
    }
     
     
    SitefinityWebApp.Designer.HTMLDesigner.registerClass('SitefinityWebApp.Designer.HTMLDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);
    Regards,
    Ivan D. Dimitrov
    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
3 posts, 0 answered