guideline to build a navigation menu similar to sitefinity.c

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

Hi,

I'm wondering how to create a master page with a top horizontal navigation similar to sitefinity.com
- what kind of control should we use?
- how to bind it to the Sitemap if this is not a "navigation control"?
- how to embed links from the Sitemap into HTML layout such as the Solution Dropdown.

has anybody succeeded in replicating this nice work?

thanks

Michael

Posted by Community Admin on 15-Sep-2011 00:00

Hi Mzerbib,

For the navigation menu on www.sitefinity.com we are using a customized version of RadMenu in a Mega Drop Down application scenario. Please find attached below a small sample for the Mega menu.

Only the first level of the pages is being bound. Then each page is checked and we create a child menu item containing RadSiteMap with the child pages of the current node.The sample uses the Sitefinity API to instantiate templates and generic container from *.ascx file. Once the template in the generic container is instantiated we add the generic container as child control of a RadMenuItem.
To use the custom template, please do the following:

1) Extract the content of the archive in your project and build it.
2) Add a navigation control on the page. Choose horizontal with drop-downs and set it as in the attached image.

Regards,
Boyan Barnev
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 19-Apr-2012 00:00

Hi,

I'm trying to get the above sample working with SF5 and it doesn't seem to work. End up with errors when rendering
Could not find the sitemap node with URL '~/home'.

Should this work with SF5?

Thanks

Posted by Community Admin on 19-Apr-2012 00:00

Duplicate, please delete.

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

Paul,

Running into the same issue running Sitefinity 5.0. Were you able to resolve the "~/home" error?

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

I've been told that it should work. However I was unable....
One suggestion I was given was to switch the SiteMapProvider in the itemnavigation control to a SitefinitySiteMapProvider and that got me past that error. However the SitefinitySiteMapProvider doesn't seem to like ~/ url's so I had to Page.ResolveUrl them. And it seems to work.

Still tweaking/testing though

One other thing I found was that if you have Group menu items at the top level them e.item.url will always return an empty string thus not filtering your child items. I had to cast the dataitem as a PageSiteNode and get the URL off that.

Hope that helps

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

Paul,
I was able to get mine up and running by tweaking the following method from the example:

void MegaMenuTemplate_IsNodeAccessible(object sender, IsAccessibleArgs e)

var pageNode = e.Node as PageSiteNode;

if (pageNode != null)

if (!pageNode.ShowInNavigation ||

(!pageNode.IsGroupPage && pageNode.Hidden) ||

(String.IsNullOrEmpty(pageNode.Title) && // used in multilingual; captures the cases of synced, split, and group pages

pageNode.Id != SiteInitializer.FrontendRootNodeId)) // ensures that the root node is not hidden and thus all other pages

e.IsAccessible = false;

return;

//The page should be hidden if it is a group page and it has no child pages.

if (pageNode.IsGroupPage && pageNode.ChildNodes.Count < 1)

e.IsAccessible = false;

return;

else

throw new NotSupportedException("The supported types are 'TaxonSiteNode' or 'PageSiteNode'.");

e.IsAccessible = true;

However know when I use the Search at the top of my site it won't redirect to the search results page.

Good luck!!

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

I am using Sitefinity 5 and I just tried this using Boyan's instructions:
1) Extract the content of the archive in your project and build it.
2) Add a navigation control on the page. Choose horizontal with drop-downs and set it as in the attached image.

I don't get the ~/home error. I get a different error about object reference not set to instance of an object.

Here is the error info.

Object reference not set to an instance of an object.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.

Source Error:

An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

Stack Trace:

[NullReferenceException: Object reference not set to an instance of an object.]

Telerik.Web.UI.ControlItem.PopulateFromDataItem(PropertyDescriptorCache properties, Object dataItem, String dataMember, Int32 depth) +332

Telerik.Web.UI.NavigationItem.PopulateFromDataItem(PropertyDescriptorCache properties, Object dataItem, String dataMember, Int32 depth) +55

Telerik.Web.UI.RadSiteMapNode.PopulateFromDataItem(PropertyDescriptorCache properties, Object dataItem, String dataMember, Int32 depth) +30

Telerik.Web.UI.ControlDataBinder.BindItem(IList items, Object dataObject, Object dataItem, String dataMember, Int32 depth) +111

Telerik.Web.UI.ControlDataBinder.BindToEnumerableData(IEnumerable dataSource) +136

Telerik.Web.UI.ControlDataBinder.BindToEnumerableData(IEnumerable data, String dataFieldID, String dataFieldParentID) +112

Telerik.Web.UI.HierarchicalControlItemContainer.PerformDataBinding(IEnumerable data) +662

System.Web.UI.WebControls.DataBoundControl.OnDataSourceViewSelectCallback(IEnumerable data) +170

System.Web.UI.WebControls.DataBoundControl.PerformSelect() +267

Telerik.Sitefinity.Web.UI.NavigationControls.Breadcrumb.Breadcrumb.OnPreRender(EventArgs e) +40

System.Web.UI.Control.PreRenderRecursiveInternal() +154

System.Web.UI.Control.PreRenderRecursiveInternal() +239

System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +3913

Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.272

If you wish to reply with any advice, please be very specific about what I need to do, for example, do I make a change in one of the files or in the configuration window for the nav control. Thanks for your help.

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

You didn't mention the Template location, so on the offchance...

MegaMenuTemplate.ascx.cs contains an explicit path reference the item (drop-down) template, which should be adapted to your site.

TemplatePath = "~/ControlTemplates/ItemTemplate.ascx",

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

I am using the same structure. The template lives at "~/ControlTemplates/ItemTemplate.ascx". I did notice that the ItemTemplate file that I downloaded in the zip file only contains 3 lines of code.

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

<telerik:RadSiteMap runat="server" ID="RadSiteMap1" DataSourceID="siteMapDataSource1"></telerik:RadSiteMap>

<asp:SiteMapDataSource runat="server" ID="siteMapDataSource1" />

Is that how it is supposed to be?

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

That's correct - this application of the mega-menu modifies the item template at run-time. I actually modified this behaviour to suit my own needs, which was to have a fixed-layout dropdown for some sections, and standard dropdowns for other sections, but it depends on your site's needs.

I guess the obvious step in your case would be to to run it from VS and break-point it at the ItemDataBound event (triggered by the level-1 items) and then step through it to find the missing object reference.

This thread is closed

All Replies