Working Breadcrumb Widget (with source)

Posted by Community Admin on 03-Aug-2018 11:01

Working Breadcrumb Widget (with source)

All Replies

Posted by Community Admin on 08-Nov-2011 00:00

Hello folks,

Bytanium has a widget for 4.2 (and it does not work in 4.3), but as you know there is still no officially supported breadcrumb widget for Sitefinity 4.3. Here is something I've "compiled" from the forums. Hope this helps someone.

Installation steps:
1) Create a folder in Sitefinity, say "Controls" under the root
2) Add a new item of type WebUserControl and give it a name "Breadcrumb"
3) Remove the automatically created "Breadcrumb.ascx.designer.cs" file
4) Copy/paste the template code to breadcrumb.ascx
5) Copy/paste the codebehind code to breadcrumb.ascx.cs
6) Build (not Rebuild - Thanks Olav)
3) From sitefinity administration, go to Toolboxes section and register it (I have registered in NavigationControlsSection)

Here is the template and the source code (sorry site did not allow me to upload a zip file)

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Breadcrumb.ascx.cs" Inherits="SitefinityWebApp.Controls.Breadcrumb" %>
<asp:SiteMapPath ID="SiteMapPath1" runat="server" RenderCurrentNodeAsLink="true"  >
    <CurrentNodeTemplate>
        <asp:Label runat="server" ID="CurrentNodeItem"></asp:Label>
    </CurrentNodeTemplate>
</asp:SiteMapPath>

Codebehind:
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System;
using System.Collections.Generic;
using System.Linq;
using Telerik.Sitefinity;
//using Telerik.Sitefinity.Abstractions;
//using Telerik.Sitefinity.Configuration;
//using Telerik.Sitefinity.GenericContent.Model;
//using Telerik.Sitefinity.Libraries.Model;
//using Telerik.Sitefinity.Model;
//using Telerik.Sitefinity.Modules.Pages.Configuration;
//using Telerik.Sitefinity.Security.Model;
//using Telerik.Sitefinity.Services;
//using Telerik.Web.UI;
 
namespace SitefinityWebApp.Controls
 
    public partial class Breadcrumb : System.Web.UI.UserControl
    
        public System.Web.UI.WebControls.SiteMapPath SiteMapPath1;
 
        protected void Page_Load(object sender, EventArgs e)
        
         
        
 
        protected override void OnInit(EventArgs e)
        
            base.OnInit(e);
            SiteMapPath1.ItemCreated += new SiteMapNodeItemEventHandler(SiteMapPath1_ItemCreated);
            SiteMapPath1.SkipLinkText = String.Empty;
            SiteMapPath1.CssClass = CssClass;
        
 
        [CssClassProperty]
        public string CssClass get; set;
 
        void SiteMapPath1_ItemCreated(object sender, SiteMapNodeItemEventArgs e)
        
 
            if (e.Item.ItemType == SiteMapNodeItemType.PathSeparator)
                e.Item.CssClass = CssClass + "Separator";
            else if (e.Item.ItemType == SiteMapNodeItemType.Current)
                e.Item.CssClass = CssClass + "Current";
            else
                e.Item.CssClass = CssClass + "Link";
             
            // hide the root node, and it's following path separator
            if (e.Item.ItemIndex == 0 || (e.Item.ItemIndex == 1 && e.Item.ItemType == SiteMapNodeItemType.PathSeparator))
            
                
                e.Item.Visible = false;
            
            else if (e.Item.ItemType == SiteMapNodeItemType.Current)
            
                using (var sf = App.WorkWith())
                
                    var pageNode = sf.Page().PageManager.GetPageNode(((Telerik.Sitefinity.Web.PageSiteNode)e.Item.SiteMapNode).Id);
                     
                    var link = e.Item.FindControl("CurrentNodeLink") as HyperLink;
                    if (link != null)
                    
                        link.Text = pageNode.Title.Value;
                        link.NavigateUrl = (e.Item.SiteMapNode).Url.Replace("~/", "/");
                    
                    else
                    
                        var label = e.Item.FindControl("CurrentNodeItem") as Label;
                        label.Text = pageNode.Title.Value;
                    
                
            
        
    

Posted by Community Admin on 09-Nov-2011 00:00

Hi Murat Eraydin,

Thank you for sharing the code with the community! This will be indeed useful to many people!

Kind regards,
Victor Velev
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 16-Nov-2011 00:00

Thanks a lot Murat, for sharing.

A minor comment:
Don't use Rebuild as in step 6. Just Build, the Rebuild/Clean operations result in missing DLLs in the Bin folder. (guess it's just the way Sitefinity is distributed, don't know if we'll ever actually need to rebuild Sitefinity projects.)
I just copied back the missing ones from the empty project of the Sitefinity Manager, all fine.

Cheers,
Olav

Posted by Community Admin on 17-Nov-2011 00:00

Updated the article, thanks ;)

Posted by Community Admin on 28-Nov-2011 00:00

THANK YOU Murat!!

I'm a Sitefinity 3x dev and am working on my first 4x project and did a "where the hell is the breadcrumb control!".

Posted by Community Admin on 01-Dec-2011 00:00

In trying to use your widget, I keep getting the following errors: 
Error 37 The type 'SitefinityWebApp.Controls.BreadCrumb' already contains a definition for 'SiteMapPath1'
Error 38 Ambiguity between 'SitefinityWebApp.Controls.BreadCrumb.SiteMapPath1' and 'SitefinityWebApp.Controls.BreadCrumb.SiteMapPath1'
I can change the variable name on the ascx page, but then I get "Object reference not set to instance of object".
Not sure what the problem is here...  I've copied your code in entirety, only difference is the name of the directory that I used.



Posted by Community Admin on 01-Dec-2011 00:00

Did you delete the xxxx.designer.cs file described in step #3?

Posted by Community Admin on 13-Dec-2011 00:00

First Off @Murat Thankyou for sharing your code, it was a real time saver,

@Russell, I am not sure if you got it to work yet but i noticed that you said you changed the directory, this would also mean you would have to modify the namespace at the top of the code behind, for example we use the following so you would just have to change the top line of code from Murat's code

namespace SitefinityWebApp.Custom.UserControls
instead of
namespace SitefinityWebApp.Controls

Posted by Community Admin on 16-Dec-2011 00:00

Thank you Murat, it's very useful :)

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

i did all the steps you stated but the control could not load on the page i wanted to add the widget too. Also why do you need to delete the  "Breadcrumb.ascx.designer.cs" file

Posted by Community Admin on 23-Jan-2012 00:00

I'm having the exact same problem as @Russell.

Error - The type 'SitefinityWebApp.Controls.BreadCrumb' already contains a definition for 'SiteMapPath1'
Error - Ambiguity between 'SitefinityWebApp.Controls.BreadCrumb.SiteMapPath1' and 'SitefinityWebApp.Controls.BreadCrumb.SiteMapPath1'

I did the instructions to the exactly as provided. Controls directory same as described. I'm using Visual Web Developer 2010 Express... it did not create a "Breadcrumb.ascx.designer.cs" file.

Can someone please tell me how to get this working?

Posted by Community Admin on 23-Jan-2012 00:00

Hi Bryan (and Russell)

I've not used Visual Web Developer before but if you get that error, you probably have that *.designer.cs file somewhere in your solution. Check if you have a button called "Show All Files" under Solution Explorer window. You can also check if that file exists in the file system (using Explorer)

HTH

Posted by Community Admin on 23-Jan-2012 00:00

Just checked again and it's not there. It did not create one. Not in the file system either.

This thread is closed