Clever Geek Handbook

Kendo ui has navigation menu

palette navigation menu like A> B> C, Does anyone know kendo ui has this widget?

+3


source to share


2 answers


I came up with this solution. Note that in this example, Kendo classes are not imported, so it does not show the correct result. Please import the kendo css classes to get correct results as shown in the screenshot below. enter image description here



$("#tree").kendoTreeView({
    select: function(e) {
        var breadcrumb = [];
        var treeView = this;

        $(e.node)
            .parents("li")
            .andSelf()
            .each(function() {
                var nodeText = $.trim(treeView.text(this));
                breadcrumb.push(nodeText);
            });

        breadcrumb = breadcrumb.join(" > ");

        $("#breadcrumb").text(breadcrumb);
        
    }
    
});


        
      

        
        
        
      

    
.k-bot{
    float:left;

}
.k-item{
 margin:20px;
}
.k-icon{
margin-left:0 !important;
}
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Breadcrumb Trail: <span id="breadcrumb">Root</span>

<ul id="tree">
    <li>Root
        <ul>
            <li>Parent 1
                <ul>
                    <li>Child 1</li>
                 </ul>
            </li>
        </ul>
    </li>
</ul>
Run code


+4


source


The following is an example Breadcrumb for KendoMenu:

$("#menu").kendoMenu({
select: function(e) {
    var breadcrumb = [];
    var treeView = this;

    $(e.item)
        .parents("li")
        .andSelf()
        .each(function() {
            var nodeText = $.trim($(this).find('span:first').text());
            breadcrumb.push(nodeText);
        });

    breadcrumb = breadcrumb.join(" > ");

    $("#breadcrumb").text(breadcrumb);                        
}
});


jsfiddle

+1


source






More articles:


All Articles