jQWidgets Forums
jQuery UI Widgets › Forums › Navigation › Tree › Hide treeitem possible?
This topic contains 5 replies, has 2 voices, and was last updated by Nadezhda 10 years, 8 months ago.
-
AuthorHide treeitem possible? Posts
-
Hi
Is it possible to hide a single tree item?
Thanks in advance?
RobHello Rob,
Please, find below an example which shows how to hide tree item:
<!DOCTYPE html> <html lang="en"> <head> <meta name="keywords" content="jQuery Tree, Tree Widget, Tree" /> <meta name="description" content="The jqxTree can display a checkboxes next to its items. You can also enable three-state checkboxes. In this mode, when the user checks an item, its sub items also become checked. When there is an unchecked item, the parent item is in indeterminate state." /> <title></title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.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" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript"> $(document).ready(function () { // create jqxTree $('#jqxTree').jqxTree({ height: '400px', hasThreeStates: true, checkboxes: true, width: '330px' }); $('#jqxTree').css('visibility', 'visible'); $('#jqxCheckBox').jqxCheckBox({ width: '200px', height: '25px', checked: true }); $('#jqxCheckBox').on('change', function (event) { var checked = event.args.checked; $('#jqxTree').jqxTree({ hasThreeStates: checked }); }); $("#jqxTree").jqxTree('selectItem', $("#home")[0]); $("#jqxButton").jqxToggleButton({ width: '200', toggled: true }); $("#jqxButton").on('click', function () { var toggled = $("#jqxButton").jqxToggleButton('toggled'); if (toggled) { $("#home").css("display", "none"); } else $("#home").css("display", "list-item"); }); }); </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-checked='true' item-expanded='true'>Solutions <ul> <li>Education</li> <li>Financial services</li> <li>Government</li> <li item-checked='false'>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> <input type="button" value="Hide/Show" id='jqxButton' /> </div> </div> </div> </div> </body> </html>
You can also use the “getItem” method if you don’t have element’s id.
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/Hi Nadezhda,
Thanks for the info.. I already has a JavaScript loop to iterate throe the list items. However i did understood how to set the CSS
The following code shows what i did and changed.REMARK !! Using (visibility hide) instead if (display none) does not hide <images.. /> if embedded a the list item. Not sure of that is by design or to be considered as a bug
funtion myHide(id2Hide) { var items = tree.jqxTree('getItems'); for (var i = 0; i < items.length; i++) { var item = items[i]; if (item.value == null) continue; if (item.value[0] == 'p') { if (parseInt(item.value.substr(1)) == id2Hide) { // changed this // item.css("visibility", "none"); // into this $('#'+item.id).css("display", "none"); return; } } } }
Hi Rob,
I suggest you to use “display: none” because “visibility: hidden” hides an element but it will take up space.
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/Hi Nadezhda,
Did you noticed the remark i wrote?
Thanks, Rob
Hi Rob,
If you want to hide item, please use “display: none”. We can not suggest you different solution.
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.