jQWidgets Forums
jQuery UI Widgets › Forums › Navigation › Tree › getting all the parents.
Tagged: jqxtree
This topic contains 3 replies, has 2 voices, and was last updated by sergion 11 years, 10 months ago.
-
Authorgetting all the parents. Posts
-
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); }; }); });
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,
MariyajQWidgets Team
http://www.jqwidgets.comThanks a lot, Mariya
Hello,
That worked well, but when I click
animals
–birds
—-pictures
——bwthe 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,
-
AuthorPosts
You must be logged in to reply to this topic.