jQuery UI Widgets › Forums › Navigation › Tree › Different Icons for 'Expanded / Collapsed' State
This topic contains 4 replies, has 3 voices, and was last updated by Dimitar 11 years, 11 months ago.
-
Author
-
Is there a way to set different icons for expanded and collapsed states?
I tried binding to the expand and collapse event but have been unable to determine how to switch out the icon displayed in the tree.
Hello ccc,
To change the default arrow icons of jqxTree, you can change the background-image property of any of the following classes:
.jqx-tree-item-arrow-collapse, .jqx-tree-item-arrow-expand, .jqx-tree-item-arrow-expand-hover, .jqx-tree-item-arrow-collapse-hoverFor example:
<style type="text/css"> .jqx-tree-item-arrow-collapse { background-image: url("../../Custom Images/arrow-right.jpg"); } </style>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thanks.
Is there a way to do this on a ‘node’ specific level? I’d like to use a different icon on each tree node based on type and include both the expanded and collapsed icons for the node.
var source = [ { icon: "images/server-opened.png", label: "Server 1", expanded: true, items: [ { icon: "/images/group-closed.png", label: "Group 1" }, { icon: "/images/group-open.png", label: "Group 2", items: [ { icon: "/images/sensor.png", label: "Sensor 1" }, { icon: "/images/sensor.png", label: "Sensor 2" }, ] } ] }];Hello,
I ran into a problem when following the recommendation of overwriting the CSS for
.jqx-tree-item-arrow-collapse
.jqx-tree-item-arrow-collapse-hover
.jqx-tree-item-arrow-expand
.jqx-tree-item-arrow-expand-hoverThe problem: the closed folder image for collapse and collapse-hover still displays when I click on the icon to expand the tree. It doesn’t happen all the time. I suspect it is some sort of contention between collapse-hover and expand-hover. Any recommendations?
Thanks
Hello,
To ccc – here is an example on how to add a custom arrow to a specific tree node:
<!DOCTYPE html><html lang="en"><head> <meta name="keywords" content="jQuery Tree, Tree Widget, TreeView" /> <meta name="description" content="The jqxTree can easily display images next to each item. In order to achieve that, you need to add 'img' element inside a 'li' element." /> <title id='Description'>The jqxTree in this demo displays images next to the tree items. </title> <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.2.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="../../Custom Images/arrow-right.jpg"></script> <script type="text/javascript"> $(document).ready(function () { var theme = getTheme(); // Create jqxTree $('#jqxTree').jqxTree({ theme: theme, width: 300 }); var items = $('#jqxTree').jqxTree('getItems'); var arrowID; var arrow; for (var i = 0; i < items.length; i++) { arrowID = "arrow" + items[i].id; arrow = $("#" + arrowID); if (items[i].label == "Mail") { if (arrow.hasClass("jqx-tree-item-arrow-collapse")) { arrow.css("background-image", "url('../../Custom Images/arrow-right.jpg')"); } else if (arrow.hasClass("jqx-tree-item-arrow-expand")) { arrow.css("background-image", "url('../../Custom Images/arrow-down.jpg')"); }; }; }; $('#jqxTree').bind('expand', function (event) { var item = $('#jqxTree').jqxTree('getItem', args.element); arrowID = "arrow" + item.id; arrow = $("#" + arrowID); if (item.label == "Mail") { arrow.css("background-image", "url('../../Custom Images/arrow-down.jpg')"); }; }); $('#jqxTree').bind('collapse', function (event) { var item = $('#jqxTree').jqxTree('getItem', args.element); arrowID = "arrow" + item.id; arrow = $("#" + arrowID); if (item.label == "Mail") { arrow.css("background-image", "url('../../Custom Images/arrow-right.jpg')"); }; }); }); </script></head><body class='default'> <div id='jqxWidget'> <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></body></html>
To bluesherpa – we will investigate the reported behaviour. Thank you for your feedback.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.