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
@(Html.Kendo().Breadcrumb()
.Name("breadcrumb")
.BindToLocation(true)
.Navigational(true))
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?
Hi,
is it possible to use the breadcrumb component to load partial views into a div?
Regards
Erwin
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();
});
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
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;" />
<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>