More in this section

Forums / General Discussions / How to 'Create a template for the custom control designer'

How to 'Create a template for the custom control designer'

16 posts, 0 answered
  1. MJia
    MJia avatar
    44 posts
    Registered:
    09 Jun 2009
    29 Dec 2010
    Link to this post
    Hi, I am new to Sitefinity 4.0
    We have couple custom user controls need to tranfer to 4.0 from sitefinity 3.7, one biggest issue is only simple textbox (string) properties are working in Sitefinity 4.0, those properties with advanced format (e.g., dropdown list, rich text editor, page selector, image uploader, etc.) are not working anymore.

    I searched the forum and I was referred to this doc.  But I was confused by the very first step: Create a template for the custom control designer.
    Can anyone explain how exactly to 'Create a template for the custom control designer' ?  I should do it in Visual Studio or Sitefinity admin ?

    Also, am I in right track to solve this issue?

    Thanks.
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    29 Dec 2010
    Link to this post
    Hello MJia,

    1. You should use a custom control, not a user control. It is not possible to create a control designer for a user control.

    2. In Sitefinity 4.0 the properties section displays only TextBox controls ( input fields) , so DropDowns and other complex types are not supported in the "Advanced" section of a control. You have to use ControlDesigner where you can add various controls like RadComboBox, RadGrid, RadTextBox etc.

    3. Template for the control designer is ascx file ( control) where you declare controls you want to use in the control designer

    sample

    <%@ Control Language="C#"   %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
     
         
    <telerik:RadComboBox runat="server" ID="RadComboBox1"></telerik:RadComboBox>


    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
  3. MJia
    MJia avatar
    44 posts
    Registered:
    09 Jun 2009
    30 Dec 2010
    Link to this post
    Thanks Ivan.
    Following the instructions, I was able to create a custom control and use it in a test page.  The front end shows correctly, but the custom designer seems not work properly.
    When I click the 'edit' button after I drag and drop this control to a page, I got an popup box as the attached screen shot.  And no buttons in the box are clickable.


    In the custom designer template, I simply put the following code:

    <%@ Control Language="C#"   %>
      
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
      
      
          
    <telerik:RadComboBox runat="server"ID="RadComboBox1"></telerik:RadComboBox>

    Anything wrong here?

    Thanks.
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    31 Dec 2010
    Link to this post
    Hello MJia,

    There is some problem with the java script of the control designer. Something is not properly initialized. Please check this tutorial and use Firebug to see if there are any errors when you open the control designer.

    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
  5. Stephen
    Stephen avatar
    70 posts
    Registered:
    09 Jun 2009
    05 Jan 2011
    Link to this post
    I got the same error as following
    "Error: TestControlProject is not defined
    Source File: http://MyWebsite/Sitefinity/Dialog/PropertyEditor?Id=b0e3e802-1b9c-42ed-a26d-4a3a55ba46be&MediaType=0&PageId=0fe2cceb-3eb0-4b9e-9fdb-e147c85cbb53&propertyValueCulture=
    Line: 289"

    My Code is here:

    TestControlDesigner.cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using Telerik.Sitefinity.Web.UI.ControlDesign;
    using Telerik.Sitefinity.Web.UI;
    using System.Web.UI;
     
    namespace TestControlProject
    {
        /// <summary>
        /// Summary description for ServerControl1
        /// </summary>
        ///[Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesigner(typeof(TestControlDesigner))]
        public class TestControlDesigner : ControlDesignerBase
        {
            public TestControlDesigner()
            {
                //
                // TODO: Add constructor logic here
                //
            }
     
            protected override string LayoutTemplateName
            {
                get
                {
                    return "TestControlProject.Resources.TestControlDesigner.ascx";
                }
            }
     
            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 controlContainer)
            {
                base.DesignerMode = ControlDesignerModes.Simple;
            }
        }
    }

    TestControlDesigner.ascx
    <%@ Control Language="C#" %>
     
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI"
        TagPrefix="sitefinity" %>
     
    <div class="sfContentViews">
        <div id="RotatorOptions">
            <h2>
                Fine tune your Rotator</h2>
            <div>
                <div id="groupSettingPageSelect">
                    <div id="" class="sfExpandableSection">
                        <h3>
                            <a href="javascript:void(0);" class="sfMoreDetails" id="A3">Layout</a></h3>
                        <ul class="sfTargetList">
                            <li>
                                <label for="RotatorWidth">
                                    Width</label>
                                <input type="text" id="RotatorWidth" class="sfTxt" />
                                <label for="RotatorHeight">
                                    Height</label>
                                <input type="text" id="RotatorHeight" class="sfTxt" />
                            </li>
                            <li>
                                <label for="RotatorItemWidth">
                                    Item Width</label>
                                <input type="text" id="RotatorItemWidth" class="sfTxt" />
                                <label for="RotatorItemHeight">
                                    Item Height</label>
                                <input type="text" id="RotatorItemHeight" class="sfTxt" />
                            </li>
                            <li>
                                <label for="RotatorItemHeight">
                                    Display Time</label>
                                <input type="text" id="RotatorDisplayTime" class="sfTxt" />
                            </li>
                        </ul>
                    </div>
                    <div id="" class="sfExpandableSection">
                        <h3>
                            <a href="javascript:void(0);" class="sfMoreDetails" id="A2">News Options</a></h3>
                        <ul class="sfTargetList">
                            <li>
                                <label for="RotatorNewsLimit" class="sfTxtLbl">
                                    News Limit</label>
                                <input type="text" id="RotatorNewsLimit" class="sfTxt" />
                            </li>
                            <li>
                                <label for="RotatorNewsProviderName" class="sfTxtLbl">
                                    Provider Name</label>
                                <input type="text" id="RotatorNewsProviderName" class="sfTxt" />
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    05 Jan 2011
    Link to this post
    Hi,

    I do not see where you have added the javascript for the control designer as shown in the tutorial. Please check this tutorial.

    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
  7. Stephen
    Stephen avatar
    70 posts
    Registered:
    09 Jun 2009
    05 Jan 2011
    Link to this post
    I followed the post, but got an error. Can you help? Thanks.

    Server Error in '/' Application.

    Assembly 'TestControlProject, Version=1.0.4022.23572, Culture=neutral, PublicKeyToken=null' does not contain a Web resource with name 'TestControlProject.Resources.RotatorDesigner.js'.

    Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

    Exception Details: System.InvalidOperationException: Assembly 'TestControlProject, Version=1.0.4022.23572, Culture=neutral, PublicKeyToken=null' does not contain a Web resource with name 'TestControlProject.Resources.RotatorDesigner.js'.

    Source Error:

    An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

    Stack Trace:

    [InvalidOperationException: Assembly 'TestControlProject, Version=1.0.4022.23572, Culture=neutral, PublicKeyToken=null' does not contain a Web resource with name 'TestControlProject.Resources.RotatorDesigner.js'.]
       System.Web.UI.WebResourceUtil.VerifyAssemblyContainsReleaseWebResource(Assembly assembly, String releaseResourceName, Assembly currentAjaxAssembly) +463986
       System.Web.UI.ScriptReference.ShouldUseDebugScript(String releaseName, Assembly assembly, Boolean isDebuggingEnabled, Assembly currentAjaxAssembly) +86
       System.Web.UI.ScriptReference.DetermineResourceNameAndAssembly(ScriptManager scriptManager, Boolean isDebuggingEnabled, String& resourceName, Assembly& assembly) +99
       System.Web.UI.ScriptReference.GetUrlFromName(ScriptManager scriptManager, IControl scriptManagerControl, Boolean zip) +103
       System.Web.UI.ScriptReference.GetUrlInternal(ScriptManager scriptManager, Boolean zip) +613
       System.Web.UI.ScriptReference.GetUrl(ScriptManager scriptManager, 

    Added the code in the TestControlDesigner.cs
    public override IEnumerable<System.Web.UI.ScriptReference> GetScriptReferences()
            {
                var res = new List<ScriptReference>(base.GetScriptReferences());
                var assemblyName = this.GetType().Assembly.GetName().ToString();
                res.Add(new ScriptReference("TestControlProject.Resources.RotatorDesigner.js", assemblyName));
                return res.ToArray();
            }

    RotatorDesigner.js in the Resources folder
    Type.registerNamespace("TestControlProject");
     
    TestControlProject.TestControlDesigner = function (element) {
        TestControlProject.TestControlDesigner.initializeBase(this, [element]);
    }
     
    TestControlProject.TestControlDesigner.prototype = {
        initialize: function () {
            TestControlProject.TestControlDesigner.callBaseMethod(this, 'initialize');
        },
        dispose: function () {
            TestControlProject.TestControlDesigner.callBaseMethod(this, 'dispose');
        },
        refreshUI: function () {
            var data = this._propertyEditor().get_control();
            jQuery("#RotatorWidth").val(data.Width);
            jQuery("#RotatorHeight").val(data.Height);
            jQuery("#RotatorItemWidth").val(data.ItemWidth);
            jQuery("#RotatorItemHeight").val(data.ItemHeight);
            jQuery("#RotatorDisplayTime").val(data.FrameDuration);
            jQuery("#RotatorNewsLimit").val(data.NewsLimit);
            jQuery("#RotatorNewsProviderName").val(data.ProviderName);
        },
        applyChanges: function () {
     
            var controlData = this._propertyEditor().get_control();
     
            controlData.Width = jQuery("#RotatorWidth").val();
            controlData.Height = jQuery("#RotatorHeight").val();
            controlData.ItemWidth = jQuery("#RotatorItemWidth").val();
            controlData.ItemHeight = jQuery("#RotatorItemHeight").val();
            controlData.FrameDuration = jQuery("#RotatorDisplayTime").val();
            controlData.NewsLimit = jQuery("#RotatorNewsLimit").val();
            controlData.ProviderName = jQuery("#RotatorNewsProviderName").val();
     
        }
    }
     
    TestControlProject.TestControlDesigner.registerClass('TestControlProject.TestControlDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);
    if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
  8. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    05 Jan 2011
    Link to this post
    Hello,

    1. You should register the script inside AssemblyInfo.cs class of the class library

    sample

    [assembly: WebResource("TestControlProject.Resources.RotatorDesigner.js", "application/x-javascript")]

    2. The script file build action should be "EmbeddedResource"

    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
  9. Stephen
    Stephen avatar
    70 posts
    Registered:
    09 Jun 2009
    05 Jan 2011
    Link to this post
    Thanks Ivan. I got a different javascript error this time. Thanks again.

    "Error: this._propertyEditor is not a function
    Source File: http://odlum-brown.gssiwebs.com/ScriptResource.axd?d=efQouX7rvM4FXYbPAtpWa1JPAJGUWSS3_C6pnvIOSUfQDhudiS6VTeQyg0z50eHHILzWE0_SkVK2XBQHuLPzjJ-Yc3SYxPEFhu_mAU_k6Rih_yUw0OtznM6nP6uGjIWvb9WSgB046jYT_GjIUuEyPHRSSVS1zroA-F1Z2PPcx8A1&t=62214758
    Line: 15"
  10. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    06 Jan 2011
    Link to this post
    Hi ,

    You have to use this.get_controlData(); to get the control data and all data from the control designer properties.

    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
  11. Stephen
    Stephen avatar
    70 posts
    Registered:
    09 Jun 2009
    07 Jan 2011
    Link to this post
    Thanks Ivan. It works.

    I have another question. In sitefinity 3.x, we can create user control with properties like the followings, how can I do the same thing in custom control. Thanks again.

    Page Picker:
    [WebEditor("Telerik.Cms.Web.UI.CmsHyperLinkUrlWebEditor, Telerik.Cms")]
    public string RedirectPageID
        {
            get
            {
                return this.redirectPageID;
            }
            set
            {
                this.redirectPageID= value;
            }
        }

    Html Content Editor
    [Telerik.Cms.Web.UI.WebEditor("Telerik.Cms.Engine.WebControls.HtmlContentEditor, Telerik.Cms.Engine")]
        [TypeConverter(typeof(StringConverter))]
        public string Section1
        {
            get { return lt_section1.Text; }
            set { lt_section1.Text = value; }
        }
  12. Phill Hodgkinson
    Phill Hodgkinson avatar
    362 posts
    Registered:
    10 Nov 2004
    07 Jan 2011
    Link to this post
    Hey Stephen,

    This has been covered a number of times and unfortunately the answer is that it's no longer possible in SF4. The only Designer options you can have with a UserControl are strings which are displayed as Text Boxes. If you want to have anything else (i.e. page selector, bool value, combo box etc) it has to be done as a compiled dll. Definitely doesn't live up to the claim that SF4 is supposed to be easier for developers.

    Regards,
    Phill
  13. Stephen
    Stephen avatar
    70 posts
    Registered:
    09 Jun 2009
    07 Jan 2011
    Link to this post
    Thanks Phill. I am currently modifying the NewsRotator widget provided with SDK. I tried to add the properties like page selector and html content editor, but did not know how to achieve that. Can you help? Thanks.
  14. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    07 Jan 2011
    Link to this post
    Hello,

    Please take a look at how to add page selector button in sitefinity 4.0 rc ?


    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
  15. Chris Salas
    Chris Salas avatar
    9 posts
    Registered:
    26 Oct 2009
    23 Aug 2011
    Link to this post
    All of the links in this post are broken.  Is there a new location for them?  I am having some of the same issues.
  16. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    24 Aug 2011
    Link to this post
    Hi Chris,

    Please check this blog post by a Sitefinity community member. Check this post as well

    http://www.sitefinity.com/devnet/forums/sitefinity-4-x/developing-with-sitefinity/pagesselector-events.aspx

    Kind regards,
    Ivan Dimitrov
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

16 posts, 0 answered