jQWidgets Forums

jQuery UI Widgets Forums Navigation Tree getting all the parents.

Tagged: 

This topic contains 3 replies, has 2 voices, and was last updated by  sergion 11 years, 10 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • getting all the parents. #23607

    sergion
    Participant

    Hello,

    I have a tree like this:

    animals
    birds
    pictures
    bw
    When I click bw,  below code shows me the parent element pictures.

    How can I show the all the parents, i.e., animals/birds/pictures?

    TIA,

    Sergio

    $(document).ready(function () {
     var theme = getDemoTheme();
     // Create jqxExpander
     $('#jqxExpander').jqxExpander({ showArrow: false, toggleMode: 'none', width: '300px', height: '360px', theme: theme });
     // Create jqxTree
     $('#jqxTree').jqxTree({ width: '100%', height: '100%', theme: theme });
     $('#jqxTree').on('select', function (event) {
     var parentElement = event.args.element.parentElement.parentElement;
     var parent = $('#jqxTree').jqxTree('getItem', parentElement);
     if (parent) {
     alert(parent.label);
     };
     });
     });
    getting all the parents. #23670

    Mariya
    Participant

    Hi sergion,

    Please take a look at the provided example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getDemoTheme();
    // Create jqxTree
    $('#jqxTree').jqxTree({ theme: theme });
    // Create jqxExpander
    $('#jqxExpander').jqxExpander({ showArrow: false, toggleMode: 'none', width: '300px', height: 'auto', theme: theme });
    $('#jqxTree').on('select', function (event) {
    if (event.args) {
    var parentElement = event.args.element;
    var parents = new Array();
    while (parentElement != null) {
    var parentItem = $("#jqxTree").jqxTree('getItem', parentElement);
    var element = parentItem.element;
    parents.push(element);
    var parentElement = parentItem.parentElement;
    }
    var parentItems = new Array();
    var parentTexts = "";
    for (var i = 1; i < parents.length; i++) {
    var item = $("#jqxTree").jqxTree('getItem', parents[i]);
    parentItems.push(item);
    parentTexts += item.label + ", ";
    }
    alert(parentTexts);
    }
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget'>
    <div id='jqxExpander'>
    <div>
    Folders</div>
    <div id='jqxTree'>
    <ul>
    <li item-expanded='true'>
    <img style='float: left; margin-right: 5px;' src='../../images/mailIcon.png' /><span
    item-title="true">Mail</span>
    <ul>
    <li item-expanded='true'>
    <img style='float: left; margin-right: 5px;' src='../../images/calendarIcon.png' /><span
    item-title="true">Calendar</span> </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/contactsIcon.png' /><span
    item-title="true">Contacts</span> </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true"> <span>Inbox</span><span style='color: Blue;'> (3)</span></span>
    <ul>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">jQWidgets</span>
    <ul>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">Admin</span> </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">Corporate</span> </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">Finance</span> </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">Other</span> </li>
    </ul>
    </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">Personal</span> </li>
    </ul>
    </li>
    <li item-expanded='true'>
    <img style='float: left; margin-right: 5px;' src='../../images/recycle.png' /><span
    item-title="true"> <span>Deleted Items</span><span style='color: Blue;'> (10)</span></span>
    <ul>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">Today</span> </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">Last Week</span> </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">Last Month</span> </li>
    </ul>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/notesIcon.png' /><span
    item-title="true">Notes</span> </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/settings.png' /><span
    item-title="true">Settings</span> </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/favorites.png' /><span
    item-title="true">Favorites</span> </li>
    </li>
    </ul>
    </li>
    </ul>
    </div>
    </div>
    </div>
    </body>
    </html>

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com

    getting all the parents. #25128

    sergion
    Participant

    Thanks a lot, Mariya

    getting all the parents. #25526

    sergion
    Participant

    Hello,

    That worked well, but when I click
    animals
    –birds
    —-pictures
    ——bw

    the response is reversed: bw, pictures, birds, animals.

    I tried js reserve() function with no success.

    What I need is the get back the following

    animals, birds, pictures, bw.

    Thanks again,

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.