Sample CustomTemplateVerticalSimple layout?

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

Anyone out there using custom layouts for the Navigation control?

The problem that we're trying to solve is to use a "Custom selection of pages" as the datasource but supply a simpler / cleaner "<ul><li></li></ul>" layout for our navigation than the default one provided by RadTabStrip.

We're looking for a SIMPLE way to specify this custom layout without excessive code or configuration. Seems like we should be able to simply create an ASCX file, specify that file path in the "Custom template path" field in the UI or CustomTemplateVerticalSimple (the layout we want to use) in the advanced properties tab and be done with it but are having trouble finding examples in the forums of code templates that do something similar.

Would appreciate any help / feedback.

Thanks!

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

Hello Pbwebmaster,

Creating a custom template for your navigation control is really simple. You can just create an .ascx file anywhere in your project's folder and then add it to the Custom Template Path field in the navigation control's designer.
The custom template of your control should look (for example) like that:

<%@ Control Language="C#" %>

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.NavigationControls.SiteMapNavigations" TagPrefix="navcontrols" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<navcontrols:SiteMapNavigationTabStrip ID="MyNavigation" runat="server">

</navcontrols:SiteMapNavigationTabStrip>

As you can see, I am importing the SitemapNavigations namespace, which holds the four different controls that the Navigation widget can use (they all inherit from different RadControls - RadMenu, RadTabStrip, RadTreeView). The class that you use (I am using SitemapNavigationMenu here) performs data bindings by itself, so when you specify the desired data source in your control's designer (you mentioned Custom selection of pages) it will be automatically binded to the new template you are creating.
Now the only thing that you are left with is customizing the control the way you want. All the attributes that can be used in the RadControls, from which the navigation controls inherit, can be used inside your template too.

Here's the template for the NavigationControl, that Sitefinity uses - you see that there are "Conditional Templates" which are in fact what you're changing when you change the different templates the control uses. Mind also that if you use the control that inherits from the RadMenu, you will have to import the javascript on your template in order for it to work.

<%@ Control Language="C#" %>

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.NavigationControls.SiteMapNavigations" TagPrefix="navcontrols" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<sf:ConditionalTemplateContainer ID="conditionalTemplate" runat="server">

<Templates>

<sf:ConditionalTemplate Left="NavigationMode" Operator="Equal" Right="HorizontalSimple" runat="server">

<navcontrols:SiteMapNavigationTabStrip ID="siteMapControl_horizontalsimple" runat="server" Skin="Sitefinity">

</navcontrols:SiteMapNavigationTabStrip>

</sf:ConditionalTemplate>

<sf:ConditionalTemplate Left="NavigationMode" Operator="Equal" Right="HorizontalDropDownMenu" runat="server">

<navcontrols:SiteMapNavigationMenu ID="siteMapControl_horizontaldropdownmenu" runat="server" Skin="Sitefinity" />

</sf:ConditionalTemplate>

<sf:ConditionalTemplate Left="NavigationMode" Operator="Equal" Right="HorizontalTabs" runat="server">

<navcontrols:SiteMapNavigationTabStrip ID="siteMapControl_horizontaltabs" runat="server" Skin="Sitefinity">

</navcontrols:SiteMapNavigationTabStrip>

</sf:ConditionalTemplate>

<sf:ConditionalTemplate Left="NavigationMode" Operator="Equal" Right="VerticalSimple" runat="server">

<navcontrols:SiteMapNavigationTabStrip ID="siteMapControl_verticalsimple" runat="server" Orientation="VerticalLeft" MaxDataBindDepth="1" Skin="Sitefinity">

</navcontrols:SiteMapNavigationTabStrip>

</sf:ConditionalTemplate>

<sf:ConditionalTemplate Left="NavigationMode" Operator="Equal" Right="SiteMapInColumns" runat="server">

<navcontrols:SitemapNavigationSiteMapControl ID="siteMapControl_sitemapincolumns" runat="server" MaxDataBindDepth="2" Skin="Sitefinity">

<LevelSettings>

<telerik:SiteMapLevelSetting Level="0">

<ListLayout RepeatDirection="Vertical" RepeatColumns="10" />

</telerik:SiteMapLevelSetting>

</LevelSettings>

</navcontrols:SitemapNavigationSiteMapControl>

</sf:ConditionalTemplate>

<sf:ConditionalTemplate Left="NavigationMode" Operator="Equal" Right="SiteMapInRows" runat="server">

<navcontrols:SitemapNavigationSiteMapControl ID="siteMapControl_sitemapinrows" runat="server" MaxDataBindDepth="2" Skin="Sitefinity">

<LevelSettings>

<telerik:SiteMapLevelSetting>

<ListLayout RepeatColumns="1" AlignRows="true" />

</telerik:SiteMapLevelSetting>

<telerik:SiteMapLevelSetting Layout="Flow" SeparatorText="┊" />

</LevelSettings>

</navcontrols:SitemapNavigationSiteMapControl>

</sf:ConditionalTemplate>

<sf:ConditionalTemplate Left="NavigationMode" Operator="Equal" Right="CustomNavigation" runat="server">

<telerik:RadSiteMap ID="siteMapControl_customnavigation" runat="server" Skin="Sitefinity" />

</sf:ConditionalTemplate>

<sf:ConditionalTemplate Left="NavigationMode" Operator="Equal" Right="VerticalTree" runat="server">

<navcontrols:SiteMapNavigationTreeView runat="server" id="siteMapControl_verticaltree" Skin="Sitefinity">

</navcontrols:SiteMapNavigationTreeView>

</sf:ConditionalTemplate>

</Templates>

</sf:ConditionalTemplateContainer>

<script type="text/javascript">

function radMenuOnClick(sender, args)

var state = args.get_item().get_attributes().getAttribute("ExpandOnClick");

args.get_item().get_attributes().setAttribute("ExpandOnClick", "true")

args.get_item().open();

function radMenuOnOpening(sender, args)

var state = args.get_item().get_attributes().getAttribute("ExpandOnClick");

if(state != "true")

args.set_cancel(true);

args.get_item().get_attributes().setAttribute("ExpandOnClick", "false")

</script>

Greetings,
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 >>

This thread is closed

All Replies