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

Forums / Developing with Sitefinity / Navigation widget custom layout view

Navigation widget custom layout view

1 posts, 0 answered
  1. Albert
    Albert avatar
    1 posts
    Registered:
    29 Dec 2011
    11 May 2012
    Link to this post
    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!
1 posts, 0 answered