Custom filed in Navigation Widget - Sitefinity - Front- & Back-End Development

All Replies

Posted by Community Admin on 03-Sep-2014 00:00

Please let me know if i can add a custom field in default navigation widget designer ?

I want to add field which should be populated in the Navigation widget designer.When i edit Navigation widget, designer should have extra field like CSS class, which can be mapped to my Navigation widget template.

Thanks,

Arun

Posted by Community Admin on 03-Sep-2014 00:00

Hi Arun,

You can create a custom field for the Pages, for example 'CustomClass'. Then you would create a custom Navigation template where you could use code-behind or even within the markup itself to bind the value of this custom field to the markup.

An example on how to do this within the code-behind:

protected void NavigationContainer_ItemDataBound(object sender, NavigationContainerItemEventArgs e)

var node = e.Item.DataItem as PageSiteNode;

if (node == null) return;

var manager = PageManager.GetManager(PageManager.GetDefaultProviderName());

if (manager == null) return;

var page = manager.GetPageNode(node.Id);

if (page == null) return;

var iconClass = page.GetValue<string>("IconClass");

if (iconClass.IsNullOrEmpty()) return;

var lnkItem = e.Item.FindControl("lnkItem") as HtmlAnchor;

if (lnkItem == null) return;

lnkItem.Attributes.Remove("class");

lnkItem.Attributes.Add("class", string.Concat("icon icon-", iconClass));

lnkItem.Attributes.Add("title", page.Title);

Best regards,
Daniel

Posted by Community Admin on 04-Sep-2014 00:00

Hi Daniel,

Thanks for you reply,

I will be bale to create custom field for pages and can access the same in navigation templates,

But i want the custom field to be added in the Navigation widget or a new field with drop down values to be added in the navigation widget designer like "cssclass" and i can sort the navigation design according to the value provided by the user.

Thanks,

Arun

Posted by Community Admin on 09-Sep-2014 00:00

Hi,

Please let me know if I can customize the default Navigation widget designer, eg. can i change the cssclass to dropdown populated with few default values.

Thanks,

Arun

Posted by Community Admin on 12-Sep-2014 00:00

Hi Arun,

Wouldn't the default CSS Class field available in the Navigation widget suffice for your needs?

If you really need to customize the default Navigation widget designer you will need to override some of the base classes in order to introduce your customization.

1. First you need to inhering from our default LightNavigationControl class (the Navigation widget).

2. For the designer you need to inherit from LightNavigationDesigner

3. You need to reference this custom designer from the custom navigation control from step 1 like so:

[ControlDesigner(typeof(CustomLightNavigationDesigner))]

public class CustomLightNavigationControl : LightNavigationControl

................

4. You will have to map a custom template for the designer to introduce the dropdown for the CSS Class property

5. You need to pass the drop-down from the designer class to the client in the GetScriptDescriptors method

5. Finally you will have to customize the client component of the designer in order to be able to get the value from the drop down and assign it to the control.

Here are some resources you might find helpful in doing this:

http://www.sitefinity.com/documentation/documentationarticles/developers-guide/sitefinity-essentials/controls/working-with-control-designers

http://www.sitefinity.com/blogs/team-blog/2011/09/20/creating_advanced_sitefinity_4_widget_control_designers

http://www.sitefinity.com/blogs/pavel-benov-s-blog/2013/12/11/extending-client-component-of-field-controls-in-sitefinity-cms

Regards,
Pavel Benov
Telerik

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items

This thread is closed