Extending Sitefinity Downloadlist Widget - Sitefinity - Front- & Back-End Development

All Replies

Posted by Community Admin on 19-Aug-2011 00:00

I'm wondering if we can extend the sitefinity built-in widget design view. What I want to do, say for "Download list", I want to add new fields "Download List Title" or "Summary" or whatever fields and have it display on the page. I still like to keep all the widget design view functionalities but just add some more fields.

May be too easy/obvious answer but I'm still learning user controls so appreciate if someone could guide me along.
Thanks.

Posted by Community Admin on 23-Aug-2011 00:00

Hi May,

You have to create a new Custom control, inheriting the DownloadList control.
Here are some guides on creating custom controls:
http://www.sitefinity.com/blogs/ivan/posts/11-01-18/implementing_sitefinity_widgets_and_designers_how_to_implement_facebook_like_button.aspx
http://www.sitefinity.com/40/help/developers-guide/sitefinity-essentials-controls-working-with-control-designers-creating-a-simple-control-designers.html
http://www.sitefinity.com/40/help/developers-guide/how-to-how-to-create-a-simple-image-selector.html

Basically, what you'll need to do is create a new assembly (or you can use a folder inside your SitefinityWebApp). In this assembly, you will have to add:
1) An .ascx file which will use one (or more) of the View templates of the current DownloadList control. You can copy the desired template code from (Design >> Widget Templates) and add for example a Label (which will hold the title) to it. Mind that you will have to change the template of all the Views, if you want all of them to have this title displayed.
This is the frontend template of the control.
2)An .ascx file which will use one of the control's designer templates, extending it with a textbox (for example) which will hold the input of the title. This one of the Views that you see when you click the edit button of your widget (it has two Views currently - Settings and Documents & Files)
3) A class that inherits from the actual control's class. This will be the file that you will use when registering your control in Sitefinity's Backend:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using Telerik.Sitefinity.Modules.Libraries.Web.UI.Documents;

using Telerik.Sitefinity.Web.UI.ControlDesign;

using Telerik.Sitefinity.Modules.Pages.Web.UI;

using Telerik.Sitefinity.Web.UI.PublicControls;

namespace SitefinityWebApp.Tests

[RequireScriptManager]

[ControlDesigner(typeof(CustomDesigner))]

[PropertyEditorTitle(typeof(PublicControlsResources), "DownloadList")]

public class NewFrontendView : DownloadListView

You don't need to override anything here, the only thing that we will change is the designer that this control is associated with ( [ControlDesigner(typeof

(CustomDesigner))]).

4) A class that inherits from the designer of the DownloadList control:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers;

namespace SitefinityWebApp.Tests

public class CustomDesigner : DownloadListDesigner

protected override void AddViews(Dictionary<string, Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerView> views)

var selectorView = new MyView();

var settingsView = new DownloadListSettingsDesignerView();

views.Add(selectorView.ViewName, selectorView);

views.Add(settingsView.ViewName, settingsView);

As I've already said, the designer has two Views, and you will edit one of them. So, you will have to override the AddViews method of the Designer, changing one of the views to your own (MyView).

5)A class that gets the template of your new view and inherits from the Documents & Files View:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers;

using Telerik.Sitefinity.Web.UI;

namespace SitefinityWebApp.Tests

public class MyView : DownloadListSelectorDesignerView

public static readonly string newTemplatePath = "~/MyControls/SitefinityWebApp.Tests.NewTemplate.ascx";

public override string LayoutTemplatePath

get

if (string.IsNullOrEmpty(this.layoutTemplatePath))

return this.layoutTemplatePath = newTemplatePath;

return this.layoutTemplatePath;

set

this.layoutTemplatePath = value;

private string layoutTemplatePath;

As you can see, here I'm giving the designer its new View by a relative path. In order for Sitefinity to use this path, you will have to register it from Settings >> Advanced >> VirtualPathSettings

6) A .js file that gets the value of the textbox inside the designer and sets it to a property of your control's class, which is then called by the template and bound to the Literal. More information on how to create this javascript file and wire it to the control, you can find in the demos i provided in the beginning of the page.

7) Register the custom control and use it (this can also be found in the demos)
All the best,
Svetoslav Petsov
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 >>

Posted by Community Admin on 16-Jan-2012 00:00

Did you get this to work? We are trying to do the exact same thing but I can't get the javascript binding to work. If you did get a title or summary working for the download list could you post your solution?

This thread is closed