jQWidgets Forums

Tagged: element, jqxtree, label, parent, Tree

This topic contains 2 replies, has 2 voices, and was last updated by sergion 12 years, 1 month ago.

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

Author

How to get parent name? Posts

April 15, 2013 at 11:19 pm How to get parent name? #19314

sergion

Participant

Hello,

Looking through the examples, I found how to get the parentid of a node:

var htmlElement = event.args.element;
 var item = $('#jqxTree').jqxTree('getItem', htmlElement);
 var parentId = item.parentId;

Also, I can get the all or part of the tree using:

$('#jqxTree').jqxTree('getSelectedItem').parentElement.textContent;
(and/or)
$('#jqxTree').jqxTree('getSelectedItem').parentElement.parentNode

Sure I am missing something very obvious, but how can I get parent’s name?

best regards and TIA,

Sergio

April 16, 2013 at 6:09 am How to get parent name? #19328

Dimitar

Participant

Hello Sergio,

Here is an 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.8.3.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 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);
                };
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id='jqxExpander'>
            <div>
                Folders
            </div>
            <div style="overflow: hidden;">
                <div style="border: none;" 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>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

April 19, 2013 at 12:01 pm How to get parent name? #19644

sergion

Participant

Hello, Dimitar.

Thanks a lot. Will try soon.

Regards,

Sergio

Author

Posts

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

You must be logged in to reply to this topic.