{
"test" => "Test",
"test/Home" => "Translation Home"
}
Hello Jason,
This is an interesting approach. Thank you for sharing it with the community.
We monitor the feature requests in the portal, and if the community shows interest in having localization capabilities in the Breadcrumb, we will consider enhancing the component.
Regards,
Ivan Danchev
Progress Telerik
Here's the full implementation of our current localized breadcrumbs. It is far from eloquent or robust but it works...for now.
--we build a list of localized key/values in the controller. Then hide the values on the page
<ol id="breadcrumbList" hidden>
@foreach (var item in Model.BreadcrumbList) {
<li>@item.Key*****@item.Value</li>
}
</ol>
Use the breadcrumb component using the Model.Breadcrumb property as the initial value to create the li and a elements.
<div id="divBreadcrumb" class="k-content wide" style="position: fixed; left: 330px; width: 800px;">
@(Html.Kendo().Breadcrumb()
.Name("breadcrumb")
.Navigational(true)
.RootIcon("home")
.Value(Model.Breadcrumb)
)
</div>
Then in jquery once the page is ready, we update the anchor's title and text with the localized text values. Leaving the href as is for proper navigation to our controller actions.
var currentBreadcrumbs = $('#breadcrumb li a');
var localizedCrumbs = $('#breadcrumbList li');
var localizedKey;
var localizedValue;
currentBreadcrumbs.each(function (i, a) {
localizedValue = localizedCrumbs[i].innerHTML.split('*****')[1];
//update anchor with localized text values for text & tooltip
//don't update the dashboard icon html - only icon displayed
if (i > 0) {
a.innerHTML = localizedValue;
}
a.title = localizedValue;
});
She ain't pretty but it works...for now.
Our current implementation of the Breadcrumb component is very simple in our _Header partial in our _Layout partial,
@(Html.Kendo().Breadcrumb()
.Name("breadcrumb")
.Navigational(true)
.RootIcon("home")
.Value(Model.Breadcrumb)
)
Model.Breadcrumb is a simple string property that contains the breadcrumb values separated by a "/". ie "Human Resources/Employees/Edit".
It works as the component correctly separates the crumbs by the "/" but we have no control over the underlying href in the anchor without resorting to using a jquery hack in the DOM.
In an ideal world, it would be great if the .Value attribute would accept a key/value pair. The key being the href to use in the anchor and value be the string value to be displayed to the user. That would simply allow us to build the kvp using whatever means we want, localize the value and then simply pass the built kvp to the breadcrumb component. It would then use the value as the text for the li and the key would be used for the href for the anchor.
Just my $0.02. Keep the change.
Jason