Persistance in Breadcrumb

[Frank Beerens]

Hi there,

Recently started using breadcrumb in a ASP.net core application, so far i have no issues with the rendering side of things nor adding items to the breadcrumb.

 

The main issue i am having is with the breadcrumb persisting during the session, meaning that i cant seem to be able to add to the list of items on entering a new page without the previous ones (except for the root item) being forgotten about.

in _layout.cshtml:

@(Html.Kendo().Breadcrumb()
                .Name("breadcrumb")
                .Navigational(true

                )
                .Items(items =>
                {
                    items.Add()
                        .Type(BreadcrumbItemType.RootItem)
                        .Href("/")
                        .Text("Home")
                        .Icon("home")
                        .ShowIcon(true)
                        .ItemClass("root")
                        .IconClass("root")
                        .LinkClass("root");
                })
            )

 

script present in other pages (specifics in this code change based on the page of course):

$(function () {
            var breadcrumb = $("#breadcrumb").data("kendoBreadcrumb");
            breadcrumb.items().push({ href: "/Product/Groups", itemClass: "item", type: "item", text: "Product Groups", showText: true, showIcon: false });
            breadcrumb.refresh();
        });

[Neli]

Hi Frank,

Thank you for reaching out the Telerik support.

As far as I understand the issue you have a Breadcrumb initialized in the _Layout page. Then, when the Index page is loaded an item is added to the Breadcrumb. When the user navigates to a different view, you need to have the Breadcrumb with the additional item and also add another one.

If this is the case and I have understood the scenario correctly I would suggest you use localstorage and save the items. You could do that when the user leaves the page, by using beforeunload event. 

 

 $(window).bind('beforeunload', function () {
        var breadcrumb = $("#breadcrumb").data("kendoBreadcrumb");
        localStorage.setItem('items', JSON.stringify(breadcrumb.items()));
  });

 

Then, when the user navigates to a different view, you could retrieve the items from the localstorage and add additional items, if needed. Note, that you may need to use the setTimeout method in order to ensure that the Breadcrumb is rendered by the time you are trying to manipulate its items. 

 

    $(document).ready(function () {        
        setTimeout(function () {            
            var itemsJson = localStorage.getItem('items');
            var items = JSON.parse(itemsJson);
            var breadcrumb = $("#breadcrumb").data("kendoBreadcrumb");
            items.push({ href: "/About/About", itemClass: "item", type: "item", text: "Another product Groups", showText: true, showIcon: false });          
            breadcrumb.items(items)
        }, 500)
    })

 

I prepared a small sample project using the described approach. In the project initially, the Index page is rendered and an item is added to the Breadcrumb. When the 'About' page is selected, before leaving the index page, the items of the Breadcrumb are saved in the localstorage. Then the list of the saved items is retrieved and an additional one is added. 

I hope the provided suggestion will help you to resolve the issue. In case you have additional questions or need further assistance, please let me know.

Regards,
Neli
Progress Telerik