Unplanned
Last Updated: 28 May 2020 13:07 by ADMIN
Jason
Created on: 21 May 2020 06:29
Category: Breadcrumb
Type: Feature Request
0
Localize breadcrumb items
Provide an option for Localizing the breadcrumb through a dictionary that corresponds to the segments of the Breadcrumb:
{
    "test" => "Test",
    "test/Home" => "Translation Home" 
}


3 comments
ADMIN
Ivan Danchev
Posted on: 28 May 2020 13:07

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Jason
Posted on: 21 May 2020 17:47

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.

 

Jason
Posted on: 21 May 2020 15:30

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