Adding Breadcrumb to my kendo grid toolbar template not working

[Ryan]

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]

Hi Ryan,

I am attaching an ASP.NET Core solution where a similar scenario to the one described is demonstrated - initializing a Breadcrumb inside the Grid Toolbar.

To achieve the desired result, I have used a similar approach to the one showcased in the provided code snippets:

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

<script id="GridToolbarTemplate" type="text/x-kendo-template">    
    <nav id="breadcrumb"></nav>
</script>

<script>
    $(document).ready(function () {
         $("#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>

Could you examine the solution and verify if it works correctly on your end? If this is the case, I would suggest to strip down additional widgets from the Toolbar template in your solution in order to identify the cause for the issue.

Regards,
Dimitar
Progress Telerik

[Ryan]

Not working at all. Removed all in my template except for  <nav id="breadcrumb"></nav> and used script here for populating breadcrumb and it showed blank.

[Ryan]

Is there anything I need to install? I also put it outside the grid and still it doesnt show at all.

[Dimitar]

Hello Ryan,

Please make sure that:

• The installed Telerik UI for ASP.NET Core NuGet package is the latest version.
• The referenced client-side scripts and styles correspond to the latest version.

There is detailed information regarding how to setup a new project in the following article:

• https://docs.telerik.com/aspnet-core/getting-started/first-steps

Regards,
Dimitar
Progress Telerik

[Ryan]

is 2019.3.1023 will not work for breadcrumb? Like I said Grid, Combobox, menu, datepicker already working using the said version.

[Dimitar]

Hello Ryan,

The Breadcrumb widget is a new widget that became available with Telerik UI for ASP.NET MVC 2020 R1 (2020.1.114) version:

• Release History 2020 R1.
  

Therefore, in case you would like to use it, upgrade the project to the specified version or newer (2020 R1 SP1 2020.1.219 is the latest).

Regards,
Dimitar
Progress Telerik

[Ryan]

Does it work with .NET Core 2.1?

I have changed my telerik password and can no longer add new package from telerik.

Would you know where to update password for source: https://nuget.telerik.com/nuget

I created new package source but it no longer prompts for username and password

 

[Dimitar]

Hello Ryan,

Yes, the Telerik UI for ASP.NET Core widgets should work correctly with the specified .NET Core version. If you have that version installed on the machine, the project can be configured when it is created through the "New Projects Wizard":

• https://docs.telerik.com/aspnet-core/getting-started/vs-integration/new-project-wizard

In terms of resetting the password - this should be done from the profile page on Telerik.com as this is the account that is used when connecting to the NuGet Feed. After changing your Telerik password, you need to reset your credentials in the NuGet.config file. To do this, run the following command in the Package Manager Console:

NuGet Sources Update -Name "telerik.com" -Source "https://nuget.telerik.com/nuget" -UserName "your login email" -Password "your new password" 

Regards,
Dimitar
Progress Telerik

[Ryan]

I'm getting NuGet : The term 'NuGet' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the 
spelling of the name, or if a path was included, verify that the path is correct and try again.

[Ryan]

Was able fix my account via Manage Windows Credentials. But I got 309 error after that.

[Ryan]

Updated Version to 2020.1.219 but still  gettting SCRIPT438: Object doesn't support property or method 'kendoBreadcrumb'

After adding the  $("#breadcrumb").kendoBreadcrumb({... on $(document).ready...

Please see attached.

[Dimitar]

Hello Ryan,

The described error usually indicates that the client-side resources are not referenced correctly. Therefore, please make sure that the client-side scripts that are referenced in the application _Layout.cshtml are the latest version (2020.1.219):

• Including Client-Side Resources.

Regards,
Dimitar
Progress Telerik

[Ryan]

Finally it worked! Thank you.

Just have followup question. I will be using this as breadcrumb of filters.

Each filter made will be added to breadcrumb array.

1. how to populate it dynamically on clients side? (Each filter applied to grid will be push to breadcrumb array)

2. how to get selected item(clicked item)? (Will use that value to pop on breadcrumb array)

3. Since I copied the styles and js, my grid looks different now (checkbox check is now color red, button red text, pager selected color red). how to set it back to default or color blue?

Thanks again for your help.

[Dimitar]

Hello Ryan,

I am glad to hear that you have managed to successfully resolve the issue and initialize the Breadcrumb.

In terms of the additional questions:

1) Adding an item to the Breadcrumb dynamically could be achieved as follows:

breadcrumb.items().push({ type: "item", text: "Inbox", showText: true, showIcon: false });
breadcrumb.refresh();

2) For working with the selection, I would suggest using the click event.

3) In terms of the different styling - I assume that you have copied the client-side stylesheets that are referenced in the article that I have linked in my last reply and the used theme there differs from the one that you have previously used. To fix this, please check what is the theme name that was previously used and replace the current name in the Layout.cshtml with the desired theme.

Regards,
Dimitar
Progress Telerik

[Ryan]

Hi, I was able to add dynamically but then if I add more than 2 it will hide breadcrumb item 2 and will show just item 1 and 3 and so on. Please see attached. Also if I click any of the item I can no longer add items again. need to refresh before I can add again.

[Dimitar]

Hello Ryan,

The observed behavior is related to the overflow functionality of the Breadcrumb. Basically - when there is not enough space in the container to display all of the Breadcrumb items, the Breadcrumb hides items after the first item of the trail and displays a double delimiter after the first item to signify this. Navigating to the last item will force previous items that are hidden to be displayed provided that there is enough space.

Regards,
Dimitar
Progress Telerik

[Ryan]

Theres enough space. if you check the pic. filter 5 can be shown but why filter 2 cant be shown when I added filter 3? also how to reload w/o refresh so that I  can click it again.

[Dimitar]

Hello Ryan,

Could you provide an isolated example that replicates the issue so that I can troubleshoot it further?

Regards,
Dimitar
Progress Telerik

[Ryan]

Same as code you posted on 13 Feb. just add another item. or replace breadcrumb code on $(document).ready function.

$("#breadcrumb").kendoBreadcrumb({
        value: 'Home/Filter1/Filter2/Filter3',
        click: function(e) {
            console.log(e.sender);
        }
    });

 

Filter1 will be hidden.

 

[Dimitar]

Hello Ryan,

I am attaching a modified version of the ASP.NET Core solution where I have used the provided initialziation script, as well as adding a new item dynamically to the Breadcrumb. With it, all of the items are being displayed on the page. Here is also a screenshot from the page.

In case you manage to reproduce the issue with the attached solution, please modify it accordingly and send it back for further review.

Regards,
Dimitar
Progress Telerik