How to make an Image widget with navigation url

I already know how to create new widget. But, I can't figure out how to make another
widget with the same functionality of image selector widget in addition
with another filed called navigation url (similar to asp .net ImageButton). This navigation url will be
used to redirect to on click of the image. Attached file contains the
view that I am after.

I have tried by inheriting "ImageSettingsDesigner"  but getting following error :



Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.

Stack Trace:

[NullReferenceException: Object reference not set to an instance of an object.]

Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers.ImageSettingsDesigner.OnInit(EventArgs e) +67".

System.Web.UI.Control.InitRecursive(Control namingContainer) +185

System.Web.UI.Control.InitRecursive(Control namingContainer) +420

System.Web.UI.Control.InitRecursive(Control namingContainer) +420

System.Web.UI.Control.InitRecursive(Control namingContainer) +420

System.Web.UI.Control.InitRecursive(Control namingContainer) +420

System.Web.UI.Control.AddedControl(Control control, Int32 index) +188

Telerik.Sitefinity.Web.UI.DialogBase.CreateChildControls() +121

System.Web.UI.Control.EnsureChildControls() +188

System.Web.UI.WebControls.CompositeControl.get_Controls() +23

Telerik.Sitefinity.Web.UI.PropertyEditor.OnInit(EventArgs e) +60

System.Web.UI.Control.InitRecursive(Control namingContainer) +185

System.Web.UI.Control.AddedControl(Control control, Int32 index) +188

Telerik.Sitefinity.Web.DialogRouteHandler.InitializeContent(Page handler, RequestContext requestContext) +413

System.Web.UI.Control.LoadRecursive() +70

System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +3177



Moreover, I am not sure what method to override and how. Any sample code will be much appreciated.

Shafiq

Hi,

Thank you for contacting Telerik Support.

Here are the steps to achieving the functionality that you are looking for.

1.       Inherit from the ImageControl class and add a custom public property named NavigateUrl. Note that this property will automatically be added to the designer of the widget because it is public.

2.       Create a template (a new .ascx file )for the new image control that has the following markup(see attached file)

3.       Add a control reference for the anchor tag.

protected internal virtual HtmlAnchor OriginalImageLink

get return this.Container.GetControl<HtmlAnchor>("navigateUrl", true);

4.       Override to LayoutTemplatePath property to return the following- > ControlUtilities.ToVppPath("SitefinityWebApp.ImageControl.ascx");

a.       Note that the path depends on where you place the ascx file.

b.      Make sure that the .ascx file has its build action set to Embedded Resource.

5.       Register the new control with Sitefinity ( you can use Sitefinity Thunder ) or the Default way

Thanks Martin, I will give a try. I forgot to tell you that I am using MVC framework. Hope that will not make any change. If you think any special action needs to be done for this then pls let me know.

Regards
Shafiq

Hi,

Thank you for getting back to me.

If you are using MVC framework, then you might find the following video useful:
http://www.sitefinity.com/developer-network/videos/creating-sitefinity-mvc-widgets-with-public-properties
Note that you will have to adapt your widget for the MVC framework.

Please inform me if I could provide further assistance.

Hi Martin,

I was busy with other stuff. Hence coming back to this issue after a while.

Anyway, I gave a try the way you mentioned without considering MVC framework for the moment. Unfortunately the template is not loading correctly. Please see attachment how it looks now.

I am not sure whether I have followed your steps correctly. I created a "ImageButton.ascx" file and put the html you have provided. I put the following codes in the "ImageButton.ascx.cs" file.

public partial class ImageButton : ImageControl
   
        public string NavigateUrl get; set;

        private string _layoutTemplatePath = "~/MVC/Designers/ImageButton/ImageButton.ascx";

        protected void Page_Load(object sender, EventArgs e)       

        protected internal virtual HtmlAnchor OriginalImageLink
       
            get
           
                return this.Container.GetControl<HtmlAnchor>("navigateUrl", true);
           
       
       public override string LayoutTemplatePath
       
            get
           
                return ControlUtilities.ToVppPath(_layoutTemplatePath);
           
            set
           
                _layoutTemplatePath = value;
           
               
   

Please point me where have I made the mistake.

Thanks
Shafiq