jQWidgets Forums
jQuery UI Widgets › Forums › Navigation › Tree › Change font color of one item in tree?
This topic contains 4 replies, has 2 voices, and was last updated by realtek 11 years ago.
-
Author
-
Hi,
Is it possible to change the font color of specific items in the tree?
Basically conditional formatting.
Thanks
Hello realtek,
It is possible. If you are loading the tree from an HTML structure, just set the particular li element’s color property, e.g.:
<div id='jqxTree'> <ul> <li item-selected='true'>Home</li> <li item-expanded='true'>Solutions <ul> <li style="color: Red;">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>Education</li> <li>Financial services</li> <li>Government</li> <li>Manufacturing</li> </li> <li id="industries">All industries and solutions</li> </ul> </li> </ul> </div>
And if you are loading it from a source object, you should set the item’s html property:
var source = [ { icon: "../../images/mailIcon.png", html: "<span style='color: Red;'>Mail</span>", expanded: true, items: [ { icon: "../../images/calendarIcon.png", label: "Calendar" }, { icon: "../../images/contactsIcon.png", label: "Contacts", selected: true } ] }, { icon: "../../images/folder.png", label: "Inbox", expanded: true, items: [ { icon: "../../images/folder.png", label: "Admin" }, { icon: "../../images/folder.png", label: "Corporate" }, { icon: "../../images/folder.png", label: "Finance" }, { icon: "../../images/folder.png", label: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ];
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thanks Dimitar,
I’m a bit confused how I could use this method if I am binding using a jqxDataAdapter and using a JSON request. Do you mean I would need to include the <span> tags in my json response coming from the server?
This is my code:
var source = { type: "GET", datatype: "json", datafields: [ { name: 'PARENT' }, { name: 'VALUE' }, { name: 'NAME' }, { name: 'id' }, { name: 'TYPE' }, { name: 'SYSTEMFIELD' } ], id: 'id', url: url, async: false, cache: false }; //Tree var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function () { $('#Tree').jqxTree('refresh'); } }); dataAdapter.dataBind(); var records = dataAdapter.getRecordsHierarchy('id', 'PARENT', 'items', [{ name: 'VALUE', map: 'value' }, { name: 'NAME', map: 'label' }]);
Thanks
Hi realtek,
There are three ways to initialize a tree – from an HTML structure, a source object, and an external data source. I have given you the solution for the first two. For the third (your case), you would indeed have to encase your labels in span elements. Here is an example, based on the demo JSON Tree:
<!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/jqxdata.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> </head> <body> <div id='content'> <script type="text/javascript"> $(document).ready(function () { var data = [ { "id": "2", "parentid": "1", "text": "Hot Chocolate", "value": "$2.3" }, { "id": "3", "parentid": "1", "text": "Peppermint Hot Chocolate", "value": "$2.3" }, { "id": "4", "parentid": "1", "text": "Salted Caramel Hot Chocolate", "value": "$2.3" }, { "id": "5", "parentid": "1", "text": "White Hot Chocolate", "value": "$2.3" }, { "text": "<span style='color: Red;'>Chocolate Beverage</span>", "id": "1", "parentid": "-1", "value": "$2.3" }, { "id": "6", "text": "Espresso Beverage", "parentid": "-1", "value": "$2.3" }, { "id": "7", "parentid": "6", "text": "Caffe Americano", "value": "$2.3" }, { "id": "8", "text": "Caffe Latte", "parentid": "6", "value": "$2.3" }, { "id": "9", "text": "Caffe Mocha", "parentid": "6", "value": "$2.3" }, { "id": "10", "text": "Cappuccino", "parentid": "6", "value": "$2.3" }, { "id": "11", "text": "Pumpkin Spice Latte", "parentid": "6", "value": "$2.3" }, { "id": "12", "text": "Frappuccino", "parentid": "-1" }, { "id": "13", "text": "Caffe Vanilla Frappuccino", "parentid": "12", "value": "$2.3" }, { "id": "15", "text": "450 calories", "parentid": "13", "value": "$2.3" }, { "id": "16", "text": "16g fat", "parentid": "13", "value": "$2.3" }, { "id": "17", "text": "13g protein", "parentid": "13", "value": "$2.3" }, { "id": "14", "text": "Caffe Vanilla Frappuccino Light", "parentid": "12", "value": "$2.3" }] // prepare the data var source = { datatype: "json", datafields: [ { name: 'id' }, { name: 'parentid' }, { name: 'text' }, { name: 'value' } ], id: 'id', localdata: data }; // create data adapter. var dataAdapter = new $.jqx.dataAdapter(source); // perform Data Binding. dataAdapter.dataBind(); // get the tree items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter // specifies the mapping between the 'text' and 'label' fields. var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]); $('#jqxWidget').jqxTree({ source: records, width: '300px' }); }); </script> <div id='jqxWidget'> </div> </div> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Perfect thanks Dimitar, it works great!
-
AuthorPosts
You must be logged in to reply to this topic.