Telerik Forums
UI for ASP.NET Core Forum
1 answer
44 views

I have a breadcrumb control with 4 items, but the 2nd item is not shown (set to display: none). I saw in another forum post that some items will not be displayed if there is not enough room but that's not the case here. It's inside <ul class="navbar-nav flex-grow-1">

Also, I noticed that press F12 to open developer tools causes one of the items to disappear. Closing developer tools does not bring it back.

How can I ensure that all breadcrumb items are displayed?

Thanks

Mihaela
Telerik team
 answered on 18 Dec 2023
1 answer
28 views
I have the following breadcrumb:
    @(Html.Kendo().Breadcrumb()
        .Name("breadcrumb")
        .BindToLocation(true)
        .Navigational(true))
When I go to route /Directory/Users/Managers it will show entries: Directory, Users, Managers. Is there a way to localize them to my language?
Vasko
Telerik team
 answered on 05 Sep 2023
1 answer
124 views

I am using the Breadcrumbs widget with an ASP.NET Core MVC application. I have configured it with ".BindToLocation(true)", and placed it within my main layout. This creates breadcrumbs that automatically reflect the current URL within the application. So much easier than having to designate names & URLs for each Action!

The problem is that when I include optional query string parameters into some of my Actions, the query string becomes part of the breadcrumb. This doesn't look clean at all. 

How can I remove the query string from the breadcrumbs?

Mihaela
Telerik team
 answered on 30 Jun 2023
0 answers
139 views

Hi,

is it possible to use the breadcrumb component to load partial views into a div?

Regards

Erwin

 

erwin
Top achievements
Rank 1
Veteran
Iron
 asked on 17 May 2021
1 answer
135 views

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
Telerik team
 answered on 10 Aug 2020
9 answers
212 views

Hi,

Does anyone have a working project that demonstrates how to localize the breadcrumb component?

I have the breadcrumb working by parsing a hidden field for a property in the model populated in the controller.

 

@(Html.Kendo().Breadcrumb()
    .Name("breadcrumb")
    .Navigational(true)
    .RootIcon("home")
    .Value(Model.Breadcrumb)
)

 

It all works perfectly.  Except now, I need to localize the string values displayed in the breadcrumbs.  And of course, not disturb the the generated URL mapping to still make the links navigational to the desired controller/action.

Is this even possible using the breadcrumb component?

Thanks

Jason

 

 

 

 

 

 

Jason
Top achievements
Rank 1
Veteran
 answered on 21 May 2020
20 answers
900 views

Hi All,

I cant seem to make breadcrumb work inside kendo grid toolbar template.

Heres my code, what did I miss?

Please note that the button menu, user type dropdown, field search dropdown, and searchbox is showing on my grid toolbar.

 

 

@(Html.Kendo().Grid<UsersList>
                                ()

.ToolBar(t =>
                                {
                                    t.ClientTemplateId("GridToolbarTemplate");
                                })

)

 

<script id="GridToolbarTemplate" type="text/x-kendo-template">
                    <div class="menuBtnContainer">
                        <ul id="menu">
                            <li>
                                <span style="font-family: verdana,arial,sans-serif; font-size: 12px;" class="k-pager-refresh k-link k-button k-button-icon" title="Menu"><span class="k-icon k-i-menu"></span></span>
                                <ul>
                                    <li>Sub Item 1</li>
                                    <li>Sub Item 2</li>
                                    <li>Sub Item 3</li>
                                </ul>
                            </li>
                        </ul>

                    </div>
                    <div class="toolbar">
                        <input id="dropdownSource" style="width:200px; display:none; font-family: verdana,arial,sans-serif; font-size: 12px;" />
                        &nbsp;&nbsp;&nbsp;
                        <label class="search-label" for="search">Search</label>
                        <input id="dropdownFilterItems" style="width:150px; display:none; font-family: verdana,arial,sans-serif; font-size: 12px;" />
                    </div>
                    <span class="k-textbox k-grid-search k-display-flex" style="float:left"><input title="Search..." class="k-input" placeholder="Search..." autocomplete="off" style="font-family: verdana,arial,sans-serif; font-size: 12px;"><span class="k-input-icon"><span class="k-icon k-i-search"></span></span></span>
                    <div class="row"></div>
                    <nav id="breadcrumb"></nav>
                </script>

 

 

 <script>
        $(document).ready(function () {
            
            $("#menu").kendoMenu({
                animation: { open: { effects: "fadeIn" } },
                
            });
            $("#dropdownSource").kendoDropDownList({
                dataSource: ["FB Users", "CB Users"],
                //select: "NC Users",
                //change: change
            });
            $("#dropdownFilterItems").kendoDropDownList({
                dataSource: ["Email", "First Name", "Last Name", "Status", "User Type", "Date Created", "Date Last Login"],
                //select: "NC Users",
                //change: change
            });
            $("#breadcrumb").kendoBreadcrumb({
                items: [
                    {
                        type: "rootitem",
                        href: "https://demos.telerik.com/kendo-ui/",
                        text: "All Components",
                        showText: true,
                        icon: "home",
                        showIcon: true
                    },
                    {
                        type: "item",
                        href: "/breadcrumb",
                        text: "Breadcrumb",
                        showText: true
                    },
                    {
                        type: "item",
                        href: "/index",
                        text: "Basic Usage",
                        showText: true
                    }
                ]
            });
            
        });

 </script>

 

 

Dimitar
Telerik team
 answered on 12 Mar 2020
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?