How to 'Create a template for the custom control designer'
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.
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>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>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
I got the same error as following
"Error: TestControlProject is not defined
Source File: MyWebsite/.../PropertyEditor
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; <%@ 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>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
I followed the post, but got an error. Can you help? Thanks.
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.
|
[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, |
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(); 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();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
Thanks Ivan. I got a different javascript error this time. Thanks again.
"Error: this._propertyEditor is not a function
Source File: odlum-brown.gssiwebs.com/ScriptResource.axd
Line: 15"
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
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; [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; 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
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.
Hello,
Please take a look at how to add page selector button in sitefinity 4.0 rc ?
Regards,
Ivan Dimitrov
the Telerik team
All of the links in this post are broken. Is there a new location for them? I am having some of the same issues.
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 >>