Navigation widget custom layout view - Sitefinity - Front- & Back-End Development

All Replies

Posted by Community Admin on 11-May-2012 00:00

I'm trying to modify the navigation widget so that the layout of child pages in the navigation drop down appear tiled rather than in a list.

I've attached a crappy mockup of what I mean.

I have the navigation widget template default as such:

<%@ 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 ID="ConditionalTemplate1" Left="NavigationMode" Operator="Equal" Right="HorizontalSimple" runat="server">

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

</navcontrols:SiteMapNavigationTabStrip>

</sf:ConditionalTemplate>

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

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

</sf:ConditionalTemplate>

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

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

</navcontrols:SiteMapNavigationTabStrip>

</sf:ConditionalTemplate>

<sf:ConditionalTemplate ID="ConditionalTemplate4" 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 ID="ConditionalTemplate5" 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 ID="ConditionalTemplate6" 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 ID="ConditionalTemplate7" Left="NavigationMode" Operator="Equal" Right="CustomNavigation" runat="server">

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

</sf:ConditionalTemplate>

<sf:ConditionalTemplate ID="ConditionalTemplate8" 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>

Is this even the right place to modify this type of thing? Can I pass in params to an existing component or do I have to manually do the layout in this ascx file or somewhere else?

Thanks

UPDATE:

I just noticed the sitefinity site's menu itself is basically what I want! If you click 'resources' you can see a tiled list of resource sub pages instead of just a long list :)

So I know the SF team just has to look how they implemented their menu and give me some hints!

This thread is closed