never make widget designer working
My Sitefinity version is 5.1.3450. I never can make a widget designer work. I have three text properties, ImageUrl1, ImageUrl2 and NavigationUrl. The designer is created by Sitefinity thunder and it displays nothing in Chrome. It displays designer and not save input data in IE. It is working in Firefox. I have no idea what is wrong. Sitefinity has example widget designer. It is simply displays a message user inputs. I added another one exactly the same field, with different name. And then it is working like above. Nothing displays in chrome, displays in IE but not save input data. And seems working in Firefox.
Does anyone know my issue? The code is attached!
Views/ImageEffect/Default.cshtml
@model SitefinityWebApp.Mvc.Models.ImageEffectModel
<h1>
@if (string.IsNullOrEmpty(Model.NavigationUrl))
<img src = "@Model.ImageUrl1" onmouseover="this.src='@Model.ImageUrl2'" onmouseout ="this.src='@Model.ImageUrl1'" />
else
<a href = "@Model.NavigationUrl">
<img src = "@Model.ImageUrl1" onmouseover="this.src='@Model.ImageUrl2'" onmouseout ="this.src='@Model.ImageUrl1'" /></a>
</h1>
Model/ImageEffectModel.cs
namespace SitefinityWebApp.Mvc.Models
public class ImageEffectModel
/// <summary>
/// Gets or sets the ImageUrl1.
/// </summary>
public string ImageUrl1 get; set;
public string ImageUrl2 get; set;
public string NavigationUrl get; set;
Controller/ImageEffectController.cs
using System;
using System.ComponentModel;
using System.Linq;
using System.Web.Mvc;
using Telerik.Sitefinity.Mvc;
using SitefinityWebApp.Mvc.Models;
namespace SitefinityWebApp.Mvc.Controllers
[ControllerToolboxItem(Name = "ImageEffect", Title = "ImageEffect", SectionName = "BWBWidgets"), Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesigner(typeof(SitefinityWebApp.WidgetDesigners.ImageEffect.ImageEffectDesigner))]
public class ImageEffectController : Controller
/// <summary>
/// Gets or sets the ImageUrl1.
/// </summary>
[Category("General")]
public string ImageUrl1 get; set;
/// <summary>
/// Gets or sets the ImageUrl2.
/// </summary>
[Category("General")]
public string ImageUrl2 get; set;
/// <summary>
/// Gets or sets the NavigationUrl.
/// </summary>
[Category("General")]
public string NavigationUrl get; set;
/// <summary>
/// This is the default Action.
/// </summary>
public ActionResult Index()
var model = new ImageEffectModel();
if (string.IsNullOrEmpty(this.NavigationUrl))
model.NavigationUrl = "www.bridgewaterbank.ca";
else
model.NavigationUrl = this.NavigationUrl;
if (string.IsNullOrEmpty(this.ImageUrl1))
model.ImageUrl1 = "/Img/ExecutiveProfile/ButtonDownState.jpg";
else
model.ImageUrl1 = this.ImageUrl1;
model.ImageUrl1 = model.ImageUrl1.TrimEnd(new char[] '/' ); ;
if (string.IsNullOrEmpty(this.ImageUrl2))
model.ImageUrl2 = "/Img/ExecutiveProfile/ButtonUpState.jpg";
else
model.ImageUrl2 = this.ImageUrl2.TrimEnd(new char[]'/');
return View("Default", model);
WidgetDesigner
ImageEffectDesigner.ascx
<%@ 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:ResourceLinks>
<div class="sfContentViews sfSingleContentView" style="max-height: 400px; overflow: auto; ">
<sitefinity:FormManager ID="formManager" runat="server" />
<ol>
<li class="sfFormCtrl">
<asp:Label runat="server" AssociatedControlID="ImageUrl1" CssClass="sfTxtLbl">ImageUrl1</asp:Label>
<asp:TextBox ID="ImageUrl1" runat="server" CssClass="sfTxt" />
<div class="sfExample">The image url can be: /images/solicitor-site-images/mcratesside.png?Status=Temp&sfvrsn=0 or /Img/ExecutiveProfile/ButtonUpState.jpg</div>
</li>
<li class="sfFormCtrl">
<asp:Label runat="server" AssociatedControlID="ImageUrl2" CssClass="sfTxtLbl">ImageUrl2</asp:Label>
<asp:TextBox ID="ImageUrl2" runat="server" CssClass="sfTxt" />
<div class="sfExample">The image url can be: /images/solicitor-site-images/mcratesside.png?Status=Temp&sfvrsn=0 or /Img/ExecutiveProfile/ButtonUpState.jpg</div>
</li>
<li class="sfFormCtrl">
<asp:Label runat="server" AssociatedControlID="NavigationUrl" CssClass="sfTxtLbl">NavigationUrl</asp:Label>
<asp:TextBox ID="NavigationUrl" runat="server" CssClass="sfTxt" />
<div class="sfExample">This is Image link, can be null</div>
</li>
<sitefinity:ImageField ID="ImageSelector" runat="server" DisplayMode="Write" UploadMode="Dialog" DataFieldName="Image" />
</ol>
</div>
ImageEffectDesigner.cs
using System;
using System.Linq;
using System.Web.UI;
using Telerik.Sitefinity.Web.UI;
using Telerik.Sitefinity.Web.UI.ControlDesign;
using System.Collections.Generic;
using Telerik.Sitefinity.Web.UI.Fields;
namespace SitefinityWebApp.WidgetDesigners.ImageEffect
/// <summary>
/// Represents a designer for the <typeparamref name="SitefinityWebApp.Mvc.Controllers.ImageEffectController"/> widget
/// </summary>
public class ImageEffectDesigner : ControlDesignerBase
#region Properties
/// <summary>
/// Gets the layout template path
/// </summary>
public override string LayoutTemplatePath
get
return ImageEffectDesigner.layoutTemplatePath;
/// <summary>
/// Gets the layout template name
/// </summary>
protected override string LayoutTemplateName
get
return String.Empty;
protected override HtmlTextWriterTag TagKey
get
return HtmlTextWriterTag.Div;
#endregion
#region Control references
/// <summary>
/// Gets the control that is bound to the ImageUrl1 property
/// </summary>
protected virtual Control ImageUrl1
get
return this.Container.GetControl<Control>("ImageUrl1", true);
/// <summary>
/// Gets the control that is bound to the ImageUrl2 property
/// </summary>
protected virtual Control ImageUrl2
get
return this.Container.GetControl<Control>("ImageUrl2", true);
/// <summary>
/// Gets the control that is bound to the NavigationUrl property
/// </summary>
protected virtual Control NavigationUrl
get
return this.Container.GetControl<Control>("NavigationUrl", true);
protected ImageField ImageSelector
get return Container.GetControl<ImageField>("ImageSelector", true);
#endregion
#region Methods
protected override void InitializeControls(Telerik.Sitefinity.Web.UI.GenericContainer container)
ImageSelector.DataFieldType = typeof(String);
// Place your initialization logic here
#endregion
#region IScriptControl implementation
/// <summary>
/// Gets a collection of script descriptors that represent ECMAScript (JavaScript) client components.
/// </summary>
public override System.Collections.Generic.IEnumerable<System.Web.UI.ScriptDescriptor> GetScriptDescriptors()
var scriptDescriptors = new List<ScriptDescriptor>(base.GetScriptDescriptors());
var descriptor = (ScriptControlDescriptor)scriptDescriptors.Last();
descriptor.AddElementProperty("imageUrl1", this.ImageUrl1.ClientID);
descriptor.AddElementProperty("imageUrl2", this.ImageUrl2.ClientID);
descriptor.AddElementProperty("navigationUrl", this.NavigationUrl.ClientID);
descriptor.AddComponentProperty("ImageSelector", this.ImageSelector.ClientID);
return scriptDescriptors;
/// <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(ImageEffectDesigner.scriptReference));
return scripts;
#endregion
#region Private members & constants
public static readonly string layoutTemplatePath = "~/WidgetDesigners/ImageEffect/ImageEffectDesigner.ascx";
public const string scriptReference = "~/WidgetDesigners/ImageEffect/ImageEffectDesigner.js";
#endregion
ImageEffectDesigner.js
Type.registerNamespace("SitefinityWebApp.WidgetDesigners.ImageEffect");
SitefinityWebApp.WidgetDesigners.ImageEffect.ImageEffectDesigner = function (element)
this._imageUrl1 = null;
this._imageUrl2 = null;
this._navigationUrl = null;
this._ImageSelector = null;
this._resizeControlDesignerDelegate = null;
SitefinityWebApp.WidgetDesigners.ImageEffect.ImageEffectDesigner.initializeBase(this, [element]);
SitefinityWebApp.WidgetDesigners.ImageEffect.ImageEffectDesigner.prototype =
/* --------------------------------- set up and tear down --------------------------------- */
initialize: function ()
/* Here you can attach to events or do other initialization */
SitefinityWebApp.WidgetDesigners.ImageEffect.ImageEffectDesigner.callBaseMethod(this, 'initialize');
,
dispose: function ()
/* this is the place to unbind/dispose the event handlers created in the initialize method */
SitefinityWebApp.WidgetDesigners.ImageEffect.ImageEffectDesigner.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 ()
this.resizeEvents();
var controlData = this._propertyEditor.get_control().Settings; /* JavaScript clone of your control - all the control properties will be properties of the controlData too */
/* RefreshUI ImageUrl1 */
//jQuery(this.get_imageUrl1()).val(controlData.ImageUrl1);
jQuery(this.get_ImageSelector()).val(controlData.ImageUrl1);
/* RefreshUI ImageUrl2 */
jQuery(this.get_imageUrl2()).val(controlData.ImageUrl2);
/* RefreshUI NavigationUrl */
jQuery(this.get_navigationUrl()).val(controlData.NavigationUrl);
,
/* 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().Settings;
controlData.ImageUrl1 = jQuery(this.get_ImageSelector()).val();
controlData.ImageUrl2 = jQuery(this.get_imageUrl2()).val();
controlData.NavigationUrl = jQuery(this.get_navigationUrl()).val();
,
/* --------------------------------- properties -------------------------------------- */
/* ImageUrl1 properties */
get_imageUrl1: function () return this._imageUrl1; ,
set_imageUrl1: function (value) this._imageUrl1 = value; ,
/* ImageUrl2 properties */
get_imageUrl2: function () return this._imageUrl2; ,
set_imageUrl2: function (value) this._imageUrl2 = value; ,
/* NavigationUrl properties */
get_navigationUrl: function () return this._navigationUrl; ,
set_navigationUrl: function (value) this._navigationUrl = value; ,
// Image Selector
get_ImageSelector: function ()
return this._ImageSelector;
,
set_ImageSelector: function (value)
this._ImageSelector = value;
,
SitefinityWebApp.WidgetDesigners.ImageEffect.ImageEffectDesigner.registerClass('SitefinityWebApp.WidgetDesigners.ImageEffect.ImageEffectDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);
if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();