RadControl in multi-view designed widgets

Posted by Community Admin on 04-Aug-2018 14:26

RadControl in multi-view designed widgets

All Replies

Posted by Community Admin on 25-Jul-2012 00:00

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

Posted by Community Admin on 06-Nov-2013 00:00

Hi Matt,

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

Thanks, Milan.

Posted by Community Admin on 11-Nov-2013 00:00

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

This thread is closed