Breadcrumbs to selected node

7 posts, 0 answers
  1. RichardAD
    RichardAD avatar
    105 posts
    Member since:
    Feb 2012

    Posted 21 Feb 2012 Link to this post

    How would I go about constructing a string value for the drillpath to the current node?

    In breadcrumb form it might look like this:
      level-1-node-text > level-2-node-text > level-3-node-text > level-4-selected-node-text
    or 
      Tools>Carpentry>Hammer>Lightweight>Stanley

    Thanks,
    Richard
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 22 Feb 2012 Link to this post

    Hi,

     I created a jsFiddle which shows how to achieve this.

    Regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. RichardAD
    RichardAD avatar
    105 posts
    Member since:
    Feb 2012

    Posted 24 Feb 2012 Link to this post

    Thanks for the quick help.

    This also worked for me:

        var node = $(e.node);
        var crumbs = node.find('span.k-in').first().text();
        $.each (node.parents('li'), function (index,value) {
                var nodeText = $(value).find('span.k-in').first().text();
                crumbs = $.trim(nodeText) + " > " + crumbs;
        });

    Your solution demonstrates a seasoned jQuery mindset -- one I hope to achieve.
       
  5. Christopher
    Christopher avatar
    10 posts
    Member since:
    Mar 2012

    Posted 01 Apr 2012 Link to this post

    The above code solves the "generating the breadcrumbs" half of the problem.
    The selected node will be associated with the last breadcrumb.
    The other half is we want to take the children of the selected node and make them be
    the new root noded of the tree, replacing all the current "roots" with them.
    I'd very much lile to see the code for doing that.
  6. RichardAD
    RichardAD avatar
    105 posts
    Member since:
    Feb 2012

    Posted 08 Apr 2012 Link to this post

    Christopher:

    Fiddle http://jsfiddle.net/ycjwB/2/ demonstrates how jquery .detach, .remove, and .append can be used to prune and graft tree parts.  The example has little real world usefulness
  7. Jason
    Jason avatar
    1 posts
    Member since:
    Oct 2015

    Posted 16 Feb in reply to Atanas Korchev Link to this post

    Hello Atanas, is it possible to configure this control so that it is a traditional horizontal breadcrumb (like this  home > page1 > page1child ), and not a tree view?
  8. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 22 Feb Link to this post

    Hello Jason,

    The fiddle shows how to show what the selected path in the TreeView is. If you are looking for a traditional breadcrumb component (which allows users to navigate to parent pages), I am afraid that there isn't one in the Kendo UI framework.

    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready