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

Forums / General Discussions / add RadEditor to designer in a custom control widget

add RadEditor to designer in a custom control widget

21 posts, 1 answered
  1. Phil
    Phil avatar
    89 posts
    Registered:
    19 Oct 2010
    30 Dec 2010
    Link to this post

    I need to display a RadEditor control, in the control designer, of my custom control widget.  I don’t want to inherit from the Content block widget because I have to have additional stuff in the designer.

     

    I have successfully worked through the tutorial at http://www.sitefinity.com/4.0/documentation/how-to-create-a-widget/creating-a-widget-as-a-custom-control.aspx and I have a basic custom control widget working fine.  I have tried to add the RadEditor into the designer but have had no success.

     

    I found this post, http://www.sitefinity.com/devnet/forums/sitefinity-4-x/general-discussions/radeditor-from-contentblock-inside-a-custom-control.aspx   where he says, "I've added a RadEditor into one of my Custom Control Designers".  That is what I need to do, but how?

     

    Please advise.
    Thank you.

  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    30 Dec 2010
    Link to this post
    Hi Phil,

    Can you share your control designer and the template for it?

    Best wishes,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Phil
    Phil avatar
    89 posts
    Registered:
    19 Oct 2010
    30 Dec 2010
    Link to this post
    Here are the designer related files and a picture of what the designer ends up displaying.
    Thanks for the speedy reply.

    The .ascx file
    <%@ Register Assembly="Telerik.Sitefinity" TagPrefix="designers" Namespace="Telerik.Sitefinity.Web.UI.ControlDesign" %>
     
    <%@ Register Assembly="Telerik.Sitefinity" TagPrefix="telerik" Namespace="Telerik.Web.UI" %>
     
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sitefinity" %>
     
    <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
     
    <div>
        <ul>
            <li>
                <!-- This is the Control Designer.
                     We want the text that the user enters here, to get into the .ascx template  -->
                <label>What do you want to pass in?</label>
                <input type="text" id="txtLblOne" />
            </li>
            <li>
                <label>Put a bunch of stuff here.</label>
                <telerik:RadEditor ID="RadEditor1" Runat="server">
                </telerik:RadEditor>
            </li>
        </ul>
    </div>

    The .cs file
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using Telerik.Sitefinity.Web.UI.ControlDesign;
    using System.Web.UI;
    using Telerik.Sitefinity.Web.UI;
    using Telerik.Web.UI;
     
    namespace lbWidgets
    {
        class GenericContentDesigner : ControlDesignerBase
        {
     
            // grab RadEditor1 ---------------------------------------------------------
            protected virtual RadEditor RadEditor1
            {
                get
                {
                    return base.Container.GetControl<RadEditor>("RadEditor1", true);
                }
            }
     
            protected override void InitializeControls(GenericContainer container)
            {
                base.DesignerMode = ControlDesignerModes.Simple;
                // throw new NotImplementedException();
            }
     
            protected override string LayoutTemplateName
            {
                get { return "lbWidgets.Resources.GenericContentDesigner.ascx"; }
            }
     
            /// <summary>
            /// Gets a collection of System.Web.UI.ScriptReference objects that define script resources
            /// that the control requires.
            /// </summary>
            public override IEnumerable<ScriptReference> GetScriptReferences()
            {
                var res = new List<ScriptReference>(base.GetScriptReferences());
                var assemblyName = this.GetType().Assembly.GetName().ToString();
                res.Add(new ScriptReference("lbWidgets.Resources.GenericContent.js", assemblyName));
                return res.ToArray();
            }
        }
    }
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    31 Dec 2010
    Link to this post
    Hello Phil,

    I attached a sample project that you can try.

    Kind regards,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
    Answered
  5. Phil
    Phil avatar
    89 posts
    Registered:
    19 Oct 2010
    01 Jan 2011
    Link to this post
    Thanks Ivan.  Your code worked beautifully.

    I had to make one change.  (At least I think, this was a required change.)  - for anyone who may come across this thread.  

    In your js file you had:
    applyChanges: function () {
            var data = this.get_controlData();
            data.Conent = "test";
    and I ended up using
    applyChanges: function () {
                  var controlData = this.get_controlData();
                  controlData.LblTwoText = this.get_radEditorControl().get_html();
    Where LblTwoText is the property in the codebehind where I need the results from the RadEditor.
  6. Duneel
    Duneel avatar
    166 posts
    Registered:
    08 Dec 2010
    13 Jan 2011
    Link to this post
    Hi Phil & Ivan,

    How do I associate this control designer with a property in my widget? Currently I've developed my widget as a user control. And I should be able to read what was entered through the editor from the code behind of the usercontrol (widget) and perform some actions.

    Thanks,
    Duneel
  7. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    13 Jan 2011
    Link to this post
    Hi,

    Inside your control you should have a public property

    sample

    public string Test
            {
                get;
                set;
            }

    Then you should be able to access this property inside the javascript of your ControlDesigner

    sample

    applyChanges: function () {
            var data = this.get_controlData();
            data.Test = "some value";
        }

    All the best,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  8. Duneel
    Duneel avatar
    166 posts
    Registered:
    08 Dec 2010
    13 Jan 2011
    Link to this post
    Hi Ivan,

    How do i specify in my control/widget for which custom designer(the custom one i created) to use.?

    Thanks,
    Duneel
  9. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    13 Jan 2011
    Link to this post
    Hello Phil,

    Please check how-to-create-a-widget. There is an attribute Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesigner

    Greetings,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  10. Duneel
    Duneel avatar
    166 posts
    Registered:
    08 Dec 2010
    13 Jan 2011
    Link to this post
    Hi Ivan,

    I'm getting the below error when I drag-drop the widget. I have the designer template (ascx) with the same name and it is embedded in the library.

    "A required control was not found in the template for "Samples.Resources.SimpleViewCustomDesigner.ascx". The control must be assignable form type "System.Web.UI.ITextControl" and must have ID "contentHtml"


    Wonderring if you have a complete working sample source code handy that I take a look and modify modify it to suite my requrement. Basically what my challenge is to create a usercontrol based widget (not the custom control widget) containing a property linked to custom designer so the user can enter text through RadEditor in edit mode.


    Thanks,
    Duneel
  11. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    13 Jan 2011
    Link to this post
    Hi ,

    Take a look at this forum post.


    Kind regards,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  12. Duneel
    Duneel avatar
    166 posts
    Registered:
    08 Dec 2010
    14 Jan 2011
    Link to this post
    Hi Ivan,

    This forum post was really helpful and I have mad a good progress and I was able to successfully implement a custom control designer containing a RadEditor to use for one of the custom widgets I developed. And I changed the same code (designer.js and template.ascx) to have a ContentBlock instead and when i triggers the edit properties of the widget I'm getting an error in the designer.js and _contentControl is becoming null. I have described about this issue in this post and would be great if you too can give me some ideas on what could be the issue here.

    Thanks!
    Duneel
  13. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    20 Jan 2011
    Link to this post
    Hello ,

    I am closing the case, since the issue was resolved in this post.

    Regards,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  14. Duneel
    Duneel avatar
    166 posts
    Registered:
    08 Dec 2010
    20 Jan 2011
    Link to this post
    Hi ivan,

    Yes it is resolved. you can close the case. Thanks for you support!

    Regards,
    Duneel
  15. FlR
    FlR avatar
    49 posts
    Registered:
    05 Oct 2010
    25 May 2011
    Link to this post
    sample
     
    public string Test
            {
                get;
                set;
            }
     
    Then you should be able to access this property inside the javascript of your ControlDesigner
     
    sample
     
    applyChanges: function () {
            var data = this.get_controlData();
            data.Test = "some value";
        }

    I've tried your approach with this sample:

    in ViewCustomDesigner.cs
    public string txtTitleCtrlValue
            {
                get { return txtTitleCtrl.Text; }
                set { txtTitleCtrl.Text = value; }
            }

    and when I'm trying to display the values from js it shows undefined
    applyChanges: function () {
            var data = this.get_controlData();
            alert(data.txtTitleCtrlValue);
             
        }

    Is there something I'm missing?
  16. Duneel
    Duneel avatar
    166 posts
    Registered:
    08 Dec 2010
    25 May 2011
    Link to this post
    Hello FIR,

    Can you post the complete .JS file?

    Cheers!
  17. FlR
    FlR avatar
    49 posts
    Registered:
    05 Oct 2010
    25 May 2011
    Link to this post
    Hi Duneel,

    Thank you for quick reply. I've realized the the property needs to be in the view *.cs not ControlDesigner.

    Thank you!
  18. Duneel
    Duneel avatar
    166 posts
    Registered:
    08 Dec 2010
    25 May 2011
    Link to this post
    Hi FIR,

    Yes you got it right the property should be on the widget.

    good luck!
  19. Devin
    Devin avatar
    149 posts
    Registered:
    09 Jun 2009
    07 Jul 2011
    Link to this post
    Hi Ivan,
    I tried the sample code but instead of putting the RADEditor in the designer it was placed on the page (see attached screenshot).  Can you please advise?

    Thanks!
    Devin
  20. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    07 Jul 2011
    Link to this post
    Hello Devin,

    It looks like you added the control inside the view control template instead of the control designer template or you have an instance of RadEditor/Html filed in the view control. I suggest that you should check this article.

    Best wishes,
    Ivan Dimitrov
    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
  21. Devin
    Devin avatar
    149 posts
    Registered:
    09 Jun 2009
    08 Jul 2011
    Link to this post
    Hi Ivan,
    I added a simple view and got it working. Thanks for your help on this!

    <%@ Control Language="C#" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Sitefinity.Web.UI.PublicControls" Assembly="Telerik.Sitefinity" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sitefinity" %>
     
    <asp:Literal ID="litContent" runat="server" />

    using System;
    using System.ComponentModel;
    using System.Collections.Generic;
    using System.Linq;
    using Telerik.Web;
    using System.Web.UI;
    using System.Web.UI.HtmlControls;
    using System.Web.UI.WebControls;
    using System.Text;
    using Telerik.Sitefinity;
    using Telerik.Sitefinity.GenericContent.Model;
    using Telerik.Sitefinity.Localization;
    using Telerik.Sitefinity.Modules;
    using Telerik.Sitefinity.Modules.News.Web.UI;
    using Telerik.Sitefinity.Modules.Pages.Web.UI;
    using Telerik.Sitefinity.Modules.Libraries;
    using Telerik.Sitefinity.News.Model;
    using Telerik.Sitefinity.Pages.Model;
    using Telerik.Sitefinity.Web.DataResolving;
    using Telerik.Sitefinity.Web.UI;
    using Telerik.Sitefinity.Web;
    using Telerik.Sitefinity.Web.UI.ControlDesign;
    using Telerik.Sitefinity.Modules.Libraries.Images;
    using Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit;
     
    namespace Telerik.Sitefinity.Samples {
        [RequireScriptManager]
        [ControlDesigner(typeof(SimpleViewCustomDesigner)), PropertyEditorTitle(typeof(Labels), "Change")]
        public class SimpleViewCustom : SimpleView {
     
            protected virtual Literal litContent {
                get { return this.Container.GetControl<Literal>("litContent", true); }
            }
     
            private string myContent = String.Empty;
            public virtual string MyContent {
                get { return this.myContent; }
                set { this.myContent = value; }
            }
     
            /// <summary>
            /// Gets the name of the embedded layout template.
            /// </summary>
            /// <value></value>
            /// <remarks>
            /// Override this property to change the embedded template to be used with the dialog
            /// </remarks>
            protected override string LayoutTemplateName {
                get {
                    return layoutTemplateName;
                }
            }
     
            /// <summary>
            /// Gets the <see cref="T:System.Web.UI.HtmlTextWriterTag"/> value that corresponds to this Web server control. This property is used primarily by control developers.
            /// </summary>
            /// <value></value>
            /// <returns>One of the <see cref="T:System.Web.UI.HtmlTextWriterTag"/> enumeration values.</returns>
            protected override HtmlTextWriterTag TagKey {
                get {
                    ////Use div wrapper tag to make easier common styling. This will surround the layout template with a div tag.
                    return HtmlTextWriterTag.Div;
                }
            }
     
            protected override void InitializeControls(GenericContainer container) {
                litContent.Text = this.MyContent;
            }
     
            #region Private fields and constants
     
            private const string layoutTemplateName = "Telerik.Sitefinity.Samples.Resources.SimpleViewCustom.ascx";    
     
            #endregion
        }
    }


    -Devin
21 posts, 1 answered