jQuery UI Widgets › Forums › Navigation › Tree › expandAll – depth level
This topic contains 5 replies, has 2 voices, and was last updated by Dimitar 11 years ago.
-
AuthorexpandAll – depth level Posts
-
Hi,
I’m using example from
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtree/index.htm#demos/jqxtree/ajaxloading.htmI’ve added method “explandAll” after load. But my category tree have 4-level depth. “expandAll” can expand only 2-level depth… How do 4 -level depth ?
Hello jasne,
It is not possible to expand all levels in this case, because the items from the lower levels are dynamically added when the items from the upper levels are expanded. Thus, you will have to call the expandAll method multiple times.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Dimitar thanks,
I need expandAll to show which category are checked (checkbox). Perhaps is other way to present for a user which category are checked from fourth level deep ?
Hi jasne,
You can get all checked items with the method getCheckedItems. Note, however, that the items should be already added to the tree. In the case of Ajax loading, the items are not added until their parent is expanded. Thus, before getting the fourth-level checked items, you have to expand the third-level items.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Dimitar thanks !
Is there any way to limit user can check only one checkbox from multi-level category tree?
Hi jasne,
Here is how to achieve this functionality. Note, however, that it works for all checkboxes only when hasThreeStates is set to false, otherwise it would work only for bottom-level items (leaves).
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../scripts/demos.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/jqxcheckbox.js"></script> <script type="text/javascript"> $(document).ready(function () { // create jqxTree $('#jqxTree').jqxTree({ height: '400px', hasThreeStates: false, checkboxes: true, width: '330px' }); $('#jqxTree').css('visibility', 'visible'); $('#jqxCheckBox').jqxCheckBox({ width: '200px', height: '25px', checked: false }); $('#jqxCheckBox').on('change', function (event) { var checked = event.args.checked; $('#jqxTree').jqxTree({ hasThreeStates: checked }); }); $("#jqxTree").jqxTree('selectItem', $("#home")[0]); $('#jqxTree').on('checkChange', function (event) { var args = event.args; var element = args.element; var checked = args.checked; var checkedItems = $('#jqxTree').jqxTree('getCheckedItems'); if (checked == true && checkedItems.length > 1) { $('#jqxTree').jqxTree('uncheckItem', element); }; }); }); </script> </head> <body class='default'> <div id='jqxWidget'> <div style='float: left;'> <div id='jqxTree' style='visibility: hidden; float: left; margin-left: 20px;'> <ul> <li id='home'>Home</li> <li item-expanded='true'>Solutions <ul> <li>Education</li> <li>Financial services</li> <li>Government</li> <li>Manufacturing</li> <li>Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> <li>Rich Internet applications</li> <li>Technical communication</li> <li>Training and eLearning</li> <li>Web conferencing</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li>Products <ul> <li>PC products</li> <li>Mobile products</li> <li>All products</li> </ul> </li> <li>Support <ul> <li>Support home</li> <li>Customer Service</li> <li>Knowledge base</li> <li>Books</li> <li>Training and certification</li> <li>Support programs</li> <li>Forums</li> <li>Documentation</li> <li>Updates</li> </ul> </li> <li>Communities <ul> <li>Designers</li> <li>Developers</li> <li>Educators and students</li> <li>Partners</li> <li>By resource <ul> <li>Labs</li> <li>TV</li> <li>Forums</li> <li>Exchange</li> <li>Blogs</li> <li>Experience Design</li> </ul> </li> </ul> </li> <li>Company <ul> <li>About Us</li> <li>Press</li> <li>Investor Relations</li> <li>Corporate Affairs</li> <li>Careers</li> <li>Showcase</li> <li>Events</li> <li>Contact Us</li> <li>Become an affiliate</li> </ul> </li> </ul> </div> <div style='margin-left: 60px; float: left;'> <div style='margin-top: 10px;'> <div id='jqxCheckBox'> Three Check States</div> </div> </div> </div> </div> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.