Custom Widget with designer not working

Posted by Community Admin on 04-Aug-2018 20:28

Custom Widget with designer not working

All Replies

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

I try to build a widget with designer which allows user to input image url and navigation url. In the control, it is hyperlink control. When I debug it, it is working, I can input image url and navigation url which pass to control. However, when I run it in IIS , it is not working at all. Hope some one can help me get out of this. I have been stucking for a day. 

My code in the following:
MyWidget.ascx

<%@ Control Language="C#" %>
<div align="center" class="ApplyNow">
<asp:Label ID="MessageLabel" Text="Text" runat="server" /><br/>
<asp:HyperLink runat="server" ID="ApplyLink" ></asp:HyperLink><br/>
</div>
<style type="text/css">
.ApplyNow

width: 300px;
background: #CCE8F6;
border: 1px solid #A3D1EF;
border-radius: 5px 5px 5px 5px;
margin: 0 0 10px;
text-align: center;

</style>

MyWidget.cs

using System;
using System.Web.UI.WebControls;
using Telerik.Sitefinity.Web.UI;
namespace SitefinityWebApp.CustomWidget.MyWidget

[Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesigner(typeof(SitefinityWebApp.CustomWidget.MyWidget.Designer.MyWidgetDesigner))]
public class MyWidget : SimpleView

#region Properties
/// <summary>
/// Gets or sets the message that will be displayed in the label.
/// </summary>
public string Message get; set;
/// <summary>
/// Gets or set the image that will be displayed
/// </summary>
public string ImageUrl get; set;
/// <summary>
/// Gets or sets the image link address
/// </summary>
public string UrlLink get; set;
/// <summary>
/// Gets the layout template path
/// </summary>
public override string LayoutTemplatePath

get

return MyWidget.layoutTemplatePath;


/// <summary>
/// Gets the layout template name
/// </summary>
protected override string LayoutTemplateName

get

return String.Empty;


#endregion
#region Control References
/// <summary>
/// Reference to the Label control that shows the Message.
/// </summary>
protected virtual Label MessageLabel

get

return this.Container.GetControl<Label>("MessageLabel", true);


protected virtual HyperLink ApplyNowLink

get return this.Container.GetControl<HyperLink>("ApplyLink", true);

#endregion
#region Methods
/// <summary>
/// Initializes the controls.
/// </summary>
/// <param name="container"></param>
/// <remarks>
/// Initialize your controls in this method. Do not override CreateChildControls method.
/// </remarks>
protected override void InitializeControls(GenericContainer container)

Label messageLabel = this.MessageLabel;
if (string.IsNullOrEmpty(this.Message))

messageLabel.Text = "Hello, World!";

else

messageLabel.Text = this.Message;

HyperLink applyLink = this.ApplyNowLink;
if (string.IsNullOrEmpty(UrlLink))

applyLink.NavigateUrl = "/Home";

else

applyLink.NavigateUrl = ResolveUrl(this.UrlLink);

if(string.IsNullOrEmpty(ImageUrl))

applyLink.ImageUrl = "/Img/apply_today.png";

else

applyLink.ImageUrl = this.ImageUrl;


#endregion
#region Private members & constants
public static readonly string layoutTemplatePath = "/CustomWidget/MyWidget/MyWidget.ascx";
#endregion



designer/MyWidgetDesigner.ascx

<div>
<span>Message:</span><br />
<input type="text" id="txtMessage" />
</div>
<div>
<span>Image Url:</span><br />
<input type="text" id="txtImageUrl" />
</div>
<div>
<span>Link after you click the image: </span><br />
<input type="text" id="txtUrlLink" />
</div>

desinger/MyWidgetDesigner.cs

using System.Web.UI;
using Telerik.Sitefinity.Web.UI.ControlDesign;
using System.Collections.Generic;
namespace SitefinityWebApp.CustomWidget.MyWidget.Designer

/// <summary>
/// Represents a designer for the <typeparamref name="SitefinityWebApp.CustomWidget.MyWidget.MyWidget"/> widget
/// </summary>
public class MyWidgetDesigner : ControlDesignerBase

#region Properties
/// <summary>
/// Gets the layout template path
/// </summary>
public override string LayoutTemplatePath

get

return MyWidgetDesigner.layoutTemplatePath;


/// <summary>
/// Gets the layout template name
/// </summary>
protected override string LayoutTemplateName

get

return layoutTemplatePath;


protected override HtmlTextWriterTag TagKey

get

return HtmlTextWriterTag.Div;


#endregion
#region Methods
protected override void InitializeControls(Telerik.Sitefinity.Web.UI.GenericContainer container)

// Place your initialization logic here
// load in simple mode
base.DesignerMode = ControlDesignerModes.Simple;

#endregion
#region IScriptControl implementation
/// <summary>
/// Gets a collection of ScriptReference objects that define script resources that the control requires.
/// </summary>
public override System.Collections.Generic.IEnumerable<System.Web.UI.ScriptReference> GetScriptReferences()

var scripts = new List<ScriptReference>(base.GetScriptReferences());
scripts.Add(new ScriptReference(MyWidgetDesigner.scriptReference));
return scripts;

#endregion
#region Private members & constants
public static readonly string layoutTemplatePath = "/CustomWidget/MyWidget/Designer/MyWidgetDesigner.ascx";
public const string scriptReference = "/CustomWidget/MyWidget/Designer/MyWidgetDesigner.js";
#endregion



designer/MyWidgetDesigner.js

//Type.registerNamespace("SitefinityWebApp.CustomWidget.MyWidget.Designer");
Type.registerNamespace("SitefinityWebApp.CustomWidget.MyWidget");
SitefinityWebApp.CustomWidget.MyWidget.Designer.MyWidgetDesigner = function (element)
SitefinityWebApp.CustomWidget.MyWidget.Designer.MyWidgetDesigner.initializeBase(this, [element]);

SitefinityWebApp.CustomWidget.MyWidget.Designer.MyWidgetDesigner.prototype =
/* --------------------------------- set up and tear down --------------------------------- */
initialize: function ()
/* Here you can attach to events or do other initialization */
SitefinityWebApp.CustomWidget.MyWidget.Designer.MyWidgetDesigner.callBaseMethod(this, 'initialize');
,
dispose: function ()
/* this is the place to unbind/dispose the event handlers created in the initialize method */
SitefinityWebApp.CustomWidget.MyWidget.Designer.MyWidgetDesigner.callBaseMethod(this, 'dispose');
,
/* Called when the designer window gets opened and here is place to "bind" your designer to the control properties */
refreshUI: function ()
alert("Entering the setup");
var controlData = this._propertyEditor.get_control(); /* JavaScript clone of your control - all the control properties will be properties of the controlData too */
alert(controlData.Message);
/* RefreshUI Message */
jQuery("#txtMessage").val(controlData.Message);
alert(controlData.ImageUrl);
jQuery("#txtImageUrl").val(controlData.ImageUrl);
jQuery("#txtUrlLink").val(controlData.UrlLink);
,
/* 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();
alert(jQuery("#txtMessage").val());
controlData.Message = jQuery("#txtMessage").val();
alert(jQuery("#txtImageUrl").val());
controlData.ImageUrl = jQuery("#txtImageUrl").val();
controlData.UrlLink = jQuery("#txtUrlLink").val();
,
get_controlData: function ()
return this.get_propertyEditor().get_control();
,
get_propertyEditor: function ()
return this._propertyEditor;


SitefinityWebApp.CustomWidget.MyWidget.Designer.MyWidgetDesigner.registerClass('SitefinityWebApp.CustomWidget.MyWidget.Designer.MyWidgetDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);
if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
 

Posted by Community Admin on 26-Oct-2012 00:00

I hate IE. In fact, when I open the page in firefox, the wiget is working. I find when I save the value, in IE it throws "Sys is undifined" and also tried several ways to fix this, not working at all. Is there some one else also having this king of problem?

This thread is closed