jQWidgets Forums
jQuery UI Widgets › Forums › Navigation › Tree › ‘treeItem is not defined’ Error
Tagged: jquery tree, jqxtree, treeItem is not defined
This topic contains 2 replies, has 2 voices, and was last updated by muhammadalaa 12 years, 1 month ago.
-
Author
-
I am using jqxtree and the first time it loads there is no errors
but I am using a refresh button that executes the following function
var treeData;
function reloadModelsTree(data) {
$(‘#jqxTree’).jqxTree(‘clear’);
treeData = data;
source.localdata = treeData,
dataAdapter.dataBind();
records = dataAdapter.getRecordsHierarchy(‘ID’, ‘ParentID’, ‘items’, [{ name: ‘Name’, map: ‘label’ }, { name: ‘ID’, map: ‘id’ }]);
$(‘#jqxTree’).jqxTree({ source: records, width: ‘99%’, theme: theme });
}when this function executes I get the ‘treeItem is not defined’ Error after the tree loads new data
What I am doing wrong ?
Hi,
We cannot reproduce that with the current version. Please, provide a sample which demonstrates that behavior.
<!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> <title id='Description'>In this demo the jqxTree is built from JSON data.</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.3.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 = getDemoTheme(); 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.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', theme: theme }); $("#ButtonWidget").click(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": "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" } ]; source.localdata = data; dataAdapter.dataBind(); var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]); $('#jqxWidget').jqxTree({ source: records }); }); }); </script> <div id='jqxWidget'> </div> <input type="button" id="ButtonWidget" value="Button Widget" /> </div></body></html>
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Thank you so much I tried your code and it is working perfect
-
AuthorPosts
You must be logged in to reply to this topic.