jQWidgets Forums

Tagged: jqxtree

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. Posts

June 22, 2013 at 1:46 am 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);
 };
 });
 });

June 24, 2013 at 9:20 am 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

July 13, 2013 at 9:07 pm getting all the parents. #25128

sergion

Participant

Thanks a lot, Mariya

July 20, 2013 at 11:30 pm 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,

Author

Posts

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

You must be logged in to reply to this topic.