This is a migrated thread and some comments may be shown as answers.

Breadcrumb with Radmenu in Site.Master

3 Answers 257 Views

This is a migrated thread and some comments may be shown as answers.

Helen asked on 27 Mar 2020, 06:16 PM

Hi,

I've been struggling to make the breadcrumb work for days. I hope you can assist me here.

At first I thought it's because I'm using site.master and the full postback is giving me problem, so I took the code from https://demos.telerik.com/aspnet-ajax/menu/examples/programming/showpath/defaultcs.aspx and made a small project to follow along. However, I'm still running into the same problem with RadMenu1.FindItemByUrl always returning null.

RadMenuItem currentItem = RadMenu1.FindItemByUrl(Request.Url.PathAndQuery);

Would you please let me know what am I missing in my setup?

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<<%@ Register tagPrefix="telerik" namespace="Telerik.Web.UI" assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns='http://www.w3.org/1999/xhtml'>

<head runat="server">

<title>Telerik ASP.NET Example</title>

<link rel="stylesheet" type="text/css" href="styles.css" />

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />

<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

<div class="demo-container size-medium no-bg">

<div class="demo-content">

<telerik:RadMenu RenderMode="Lightweight" ID="RadMenu1" runat="server" EnableRoundedCorners="true"

EnableShadows="true" EnableTextHTMLEncoding="true" Skin="Silk">

<Items>

<telerik:RadMenuItem Text="Products" NavigateUrl="DefaultCS.aspx?Page=Products">

<Items>

<telerik:RadMenuItem Text="UI for ASP.NET AJAX" NavigateUrl="DefaultCS.aspx?Page=ASP.NET AJAX Controls" />

<telerik:RadMenuItem Text="UI for WinForms" NavigateUrl="DefaultCS.aspx?Page=WinForms Controls" />

<telerik:RadMenuItem Text="UI for WPF" NavigateUrl="DefaultCS.aspx?Page=WPF Controls" />

<telerik:RadMenuItem Text="UI for Silverlight" NavigateUrl="DefaultCS.aspx?Page=Silverlight Controls" />

<telerik:RadMenuItem Text="Reporting" NavigateUrl="DefaultCS.aspx?Page=Telerik Reporting" />

<telerik:RadMenuItem Text="Data Access" NavigateUrl="DefaultCS.aspx?Page=Telerik OpenAccess ORM" />

<telerik:RadMenuItem Text="Sitefinity ASP.NET CMS" NavigateUrl="DefaultCS.aspx?Page=Sitefinity ASP.NET CMS" />

<telerik:RadMenuItem Text="Test Studio" NavigateUrl="DefaultCS.aspx?Page=WebUI Test Studio" />

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Consulting" NavigateUrl="DefaultCS.aspx?Page=Consulting">

<Items>

<telerik:RadMenuItem Text="On-site Training" NavigateUrl="DefaultCS.aspx?Page=On-site Training" />

<telerik:RadMenuItem Text="Consulting Express" NavigateUrl="DefaultCS.aspx?Page=Consulting Express" />

<telerik:RadMenuItem Text="Open Classes Training" NavigateUrl="DefaultCS.aspx?Page=Open Classes Training" />

<telerik:RadMenuItem Text="Online Training" NavigateUrl="DefaultCS.aspx?Page=Online Training" />

<telerik:RadMenuItem Text="Project Consulting" NavigateUrl="DefaultCS.aspx?Page=Project Consulting" />

<telerik:RadMenuItem Text="Telerik Webinars" NavigateUrl="DefaultCS.aspx?Page=Telerik Webinars" />

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Purchase" NavigateUrl="DefaultCS.aspx?Page=Purchase">

<Items>

<telerik:RadMenuItem Text="Buy Now" NavigateUrl="DefaultCS.aspx?Page=Buy Now" />

<telerik:RadMenuItem Text="Renewals & Upgrades" NavigateUrl="DefaultCS.aspx?Page=Renewals & Upgrades" />

<telerik:RadMenuItem Text="License Agreement" NavigateUrl="DefaultCS.aspx?Page=License Agreement" />

<telerik:RadMenuItem Text="FAQ" NavigateUrl="DefaultCS.aspx?Page=FAQ" />

<telerik:RadMenuItem Text="Purchase Orders" NavigateUrl="DefaultCS.aspx?Page=Purchase Orders" />

<telerik:RadMenuItem Text="Contact Sales" NavigateUrl="DefaultCS.aspx?Page=Contact Sales" />

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Support" NavigateUrl="DefaultCS.aspx?Page=Support">

<Items>

<telerik:RadMenuItem Text="Support by Product" NavigateUrl="DefaultCS.aspx?Page=Support by Product" />

<telerik:RadMenuItem Text="Documentation" NavigateUrl="/DefaultCS.aspx?Page=Documentation" />

<telerik:RadMenuItem Text="Demos" NavigateUrl="DefaultCS.aspx?Page=Demos" />

<telerik:RadMenuItem Text="Knowledge Base" NavigateUrl="DefaultCS.aspx?Page=Knowledge Base" />

<telerik:RadMenuItem Text="Telerik Trainer" NavigateUrl="DefaultCS.aspx?Page=Telerik Trainer" />

<telerik:RadMenuItem Text="Videos" NavigateUrl="DefaultCS.aspx?Page=Videos" />

<telerik:RadMenuItem Text="Skins" NavigateUrl="DefaultCS.aspx?Page=Skins" />

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Community" NavigateUrl="DefaultCS.aspx?Page=Community">

<Items>

<telerik:RadMenuItem Text="Forums" NavigateUrl="DefaultCS.aspx?Page=Forums" />

<telerik:RadMenuItem Text="Blogs" NavigateUrl="DefaultCS.aspx?Page=Blogs" />

<telerik:RadMenuItem Text="Events" NavigateUrl="DefaultCS.aspx?Page=Events" />

<telerik:RadMenuItem Text="Code Library" NavigateUrl="DefaultCS.aspx?Page=Code Library" />

<telerik:RadMenuItem Text="Learning Resources" NavigateUrl="DefaultCS.aspx?Page=Learning Resources" />

<telerik:RadMenuItem Text="Announcements" NavigateUrl="DefaultCS.aspx?Page=Announcements" />

<telerik:RadMenuItem Text="Free Products" NavigateUrl="DefaultCS.aspx?Page=Free Products" />

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Company" NavigateUrl="DefaultCS.aspx?Page=Company">

<Items>

<telerik:RadMenuItem Text="About Telerik" NavigateUrl="DefaultCS.aspx?Page=About Telerik" />

<telerik:RadMenuItem Text="Press Center" NavigateUrl="DefaultCS.aspx?Page=Press Center" />

<telerik:RadMenuItem Text="Careers" NavigateUrl="DefaultCS.aspx?Page=Careers" />

<telerik:RadMenuItem Text="Contact Us" NavigateUrl="DefaultCS.aspx?Page=Contact Us" />

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

<div class="breadcrumb">

<telerik:RadSiteMap ID="BreadCrumbSiteMap" runat="server" DataTextField="Text" DataNavigateUrlField="NavigateUrl" Skin="Silk">

<DefaultLevelSettings ListLayout-RepeatDirection="Horizontal" SeparatorText="/" Layout="Flow" />

</telerik:RadSiteMap>

<h3>

<asp:Literal runat="server" ID="PageTitleLiteral" /></h3>

</div>

</form>

</body>

</html>

Code Behind:

using System;

using System.Collections.Generic;

using Telerik.Web.UI;

public partial class _Default : System.Web.UI.Page

{

//If RadMenu is data bound, please use its DataBound event instead of PageLoad.

protected void Page_Load(object sender, EventArgs e)

{

RadMenuItem currentItem = RadMenu1.FindItemByUrl(Request.Url.PathAndQuery);

if (currentItem != null)

{

//Select the current item and his parents

currentItem.HighlightPath();

//Update the title of the

PageTitleLiteral.Text = currentItem.Text;

//Populate the breadcrumb

DataBindBreadCrumbSiteMap(currentItem);

}

else

RadMenu1.Items[0].HighlightPath();

}

private void DataBindBreadCrumbSiteMap(RadMenuItem currentItem)

{

List<RadMenuItem> breadCrumbPath = new List<RadMenuItem>();

while (currentItem != null)

{

breadCrumbPath.Insert(0, currentItem);

currentItem = currentItem.Owner as RadMenuItem;

}

BreadCrumbSiteMap.DataSource = breadCrumbPath;

BreadCrumbSiteMap.DataBind();

}

Thank you,

Helen

3 Answers, 1 is accepted

answered on 31 Mar 2020, 04:18 PM

Hi Helen,

The issue is most likely to be caused by the copied code. I understand from your description that the page in trouble is "Default.aspx" but the NavigateURLs of the Menus are "DefaultCS.aspx", therefore the value returned by the Request.Url.PathAndQuery will never match the URLs of the Menu items, hence returning null.

Once you copied the code, you will need to ensure that all the properties are adjusted according to your current project.

Kind regards,
Doncho
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

answered on 31 Mar 2020, 06:13 PM

Hi Doncho,

My bad on that mistake. The example is working fine after I fixed that link. I couldn't get the FindItemByUrl to work that's why I downloaded the sample code as reference, but I'm still having trouble getting FindItemByUrl to cooperate with me =(

I made another smaller project that shows you how my current project is setup using site.master and RadPageLayout. Thank you in advance for you help.

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="TestMasterPage.SiteMaster" %>

<%@ Register tagPrefix="telerik" namespace="Telerik.Web.UI" assembly="Telerik.Web.UI" %>

<!DOCTYPE html>

<html lang="en">

<head runat="server">

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title><%: Page.Title %> - My ASP.NET Application</title>

<asp:PlaceHolder runat="server">

<%: Scripts.Render("~/bundles/modernizr") %>

</asp:PlaceHolder>

<webopt:bundlereference runat="server" path="~/Content/css" />

<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

</head>

<body>

<form runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Name="MsAjaxBundle" />

<asp:ScriptReference Name="jquery" Path="~/Scripts/jquery-3.3.1.js" />

<asp:ScriptReference Name="bootstrap" Path="~/Scripts/bootstrap.js" />

<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />

<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />

<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />

<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />

<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />

<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />

<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />

<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />

<asp:ScriptReference Name="WebFormsBundle" />

</Scripts>

</telerik:RadScriptManager>

<telerik:RadPageLayout ID="RadPageLayout1" runat="server" GridType="Fluid" CssClass="borderCssClass">

<Rows>

<telerik:LayoutRow RowType="Container">

<Columns>

<telerik:LayoutColumn Span="2">

<telerik:RadMenu RenderMode="Lightweight" ID="RadMenu1" runat="server" EnableRoundedCorners="true" EnableShadows="false" Flow="Vertical" EnableSelection="true" CausesValidation="false" >

<Items>

<telerik:RadMenuItem runat="server" Text="Utilities">

<Items>

<telerik:RadMenuItem Text="Menu Item 1" NavigateUrl="~/PresentationLayer/Level1/Level2/Default.aspx?Page=MenuItem1" />

<telerik:RadMenuItem Text="Menu Item 2" NavigateUrl="~/PresentationLayer/Level11/Level22/Default.aspx?Page=MenuItem2" />

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

</telerik:LayoutColumn>

<telerik:LayoutColumn Span="10">

<div class="breadcrumb">

<telerik:RadSiteMap ID="BreadCrumbSiteMap" runat="server" DataTextField="Text" DataNavigateUrlField="NavigateUrl" Skin="Silk" >

<DefaultLevelSettings ListLayout-RepeatDirection="Horizontal" SeparatorText="/" Layout="Flow" />

</telerik:RadSiteMap>

</div>

<asp:ContentPlaceHolder ID="MainContent" runat="server">

</asp:ContentPlaceHolder>

</telerik:LayoutColumn>

</Columns>

</telerik:LayoutRow>

</Rows>

</telerik:RadPageLayout>

</form>

</body>

</html>

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Web.UI;

namespace TestMasterPage

{

public partial class SiteMaster : MasterPage

{

protected void Page_Load(object sender, EventArgs e)

{

RadMenuItem currentItem = RadMenu1.FindItemByUrl(Request.Url.PathAndQuery);

if (currentItem != null)

{

//Select the current item and his parents

currentItem.HighlightPath();

//Update the title of the

//PageTitleLiteral.Text = currentItem.Text;

//Populate the breadcrumb

DataBindBreadCrumbSiteMap(currentItem);

}

else

RadMenu1.Items[0].HighlightPath();

}

private void DataBindBreadCrumbSiteMap(RadMenuItem currentItem)

{

List<RadMenuItem> breadCrumbPath = new List<RadMenuItem>();

while (currentItem != null)

{

breadCrumbPath.Insert(0, currentItem);

currentItem = currentItem.Owner as RadMenuItem;

}

BreadCrumbSiteMap.DataSource = breadCrumbPath;

BreadCrumbSiteMap.DataBind();

}

answered on 02 Apr 2020, 04:28 PM

Hi Helen,

The NavigateUrl method is searching by the specified values. If it can't find the values, then either the URL in the browser is different or not searching by the correct value.

For instance, if the NavigateUrl is set to NavigateUrl="~/PresentationLayer/Level1/Level2/Default.aspx?Page=MenuItem1", then the URL in the browser must be https://yourwebsite.domain/PresentationLayer/Level1/Level2/Default.aspx?Page=MenuItem1

Place a couple of breakpoints, and debug the "Request.Url.PathAndQuer" property and see what it returns.

More information on that you can find below:

Once you know what the page Returns, you can then try to compare that with the Menu item's value.

See Radmenu FindItem and Methods and Properties articles.

Regards,
Doncho
Progress Telerik