+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Custom filed in Navigation Widget

Custom filed in Navigation Widget

5 posts, 0 answered
  1. Arun
    Arun avatar
    10 posts
    Registered:
    03 Nov 2011
    03 Sep 2014
    Link to this post

    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

     

  2. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    03 Sep 2014 in reply to Arun
    Link to this post

    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

  3. Arun
    Arun avatar
    10 posts
    Registered:
    03 Nov 2011
    04 Sep 2014
    Link to this post

    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

  4. Arun
    Arun avatar
    10 posts
    Registered:
    03 Nov 2011
    09 Sep 2014
    Link to this post

    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

     

  5. Pavel Benov
    Pavel Benov avatar
    341 posts
    Registered:
    14 Mar 2016
    12 Sep 2014
    Link to this post
    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
     
5 posts, 0 answered