jQWidgets Forums
jQuery UI Widgets › Forums › General Discussions › Navigation › Tree › Select Tree item by 'value' ?
Tagged: checkChange, initialized, item, jqxtree, select, Tree, value
This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 11 years, 9 months ago.
-
Author
-
Hi,
How can I select an item by the \’value\’ in the Tree?
I can\’t seem to see how to do this in the tree… It looks like its probably the \’li\’ text.
Thanks
Hello realtek,
Here is an example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><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.10.2.min.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 theme = ""; 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": "Chocolate Beverage", "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.9" }] // 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', theme: theme }); $("#selectByValue").click(function () { var items = $('#jqxWIDget').jqxTree('getItems'); for (var i = 0; i < items.length; i++) { var currentItem = items[i]; if (currentItem.value == "$2.9") { $('#jqxWIDget').jqxTree('selectItem', currentItem.element); }; }; }); }); </script> <button id="selectByValue"> Select $2.9 beverage</button> <div id='jqxWIDget'> </div> </div></body></html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
Thank you for this.
I literally just worked out a solution and wondered if your solution was a better idea….
This is what I used:
$(“#jqxTree”).on(‘initialized’, function (event) {
$(“#jqxTree”).jqxTree(‘checkItem’, $(‘li:contains(“TEST”)’)[1], true);
});I know it will ALWAYS be a child that needs selecting and if I need it to be the parent I will use [0].
It seems to work ok and wondered what you thought?
My only issue is doing it like this does not trigger the “checkChange” event ? Any idea’s? Thanks!
Hi realtek,
You should bind to the initialized and checkChange events before the tree initialization.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.