jQuery UI Widgets › Forums › Navigation › Tree › How to reassign source to tree
This topic contains 2 replies, has 2 voices, and was last updated by sdalby 12 years, 2 months ago.
Viewing 3 posts - 1 through 3 (of 3 total)
-
Author
-
Following is your example on how to assign a model to a jqxTree. How do I assign a new model after the tree has been created?
Thanks in advance 🙂
/Soeren
var source = [ { label: "Item 1", expanded: true, items: [ { label: "Item 1.1" }, { label: "Item 1.2", selected: true } ] }, { label: "Item 2" }, { label: "Item 3" }, { label: "Item 4", items: [ { label: "Item 4.1" }, { label: "Item 4.2" } ] }, { label: "Item 5" }, { label: "Item 6" }, { label: "Item 7" }]; // create jqxTree$('#jqxTree').jqxTree({ source: source, width: '330px'});
Hello Soeren,
Here is an example based on the above. When the button is clicked, the source of the jqxTree is changed.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>The jqxTree displays a hierarchical collection of items. You can populate it from 'UL' or by using its 'source' property.</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" /> <script type="text/javascript" src="../scripts/jquery-1.7.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"> $(document).ready(function () { var source = [ { label: "Item 1", expanded: true, items: [ { label: "Item 1.1" }, { label: "Item 1.2", selected: true } ] }, { label: "Item 2" }, { label: "Item 3" }, { label: "Item 4", items: [ { label: "Item 4.1" }, { label: "Item 4.2" } ] }, { label: "Item 5" }, { label: "Item 6" }, { label: "Item 7" } ]; var newSource = [ { label: "New Item 1", expanded: true, items: [ { label: "New Item 1.1" }, { label: "New Item 1.2", selected: true } ] }, { label: "New Item 2" }, { label: "New Item 3" }, { label: "New Item 4", items: [ { label: "New Item 4.1" }, { label: "New Item 4.2" } ] } ]; // Create jqxTree. $('#jqxTree').jqxTree({ source: source, height: '300px', width: '300px' }); $("#change").click(function () { $("#jqxTree").jqxTree({ source: newSource }); }); }); </script></head><body class='default'> <button id="change"> Change the tree source</button> <div id='jqxTree'> </div></body></html>
Best Regards,
DimitarjqWidgets team
http://www.jqwidgets.com/It worked like a charm 🙂
Thanks Dimitar
-
AuthorPosts
Viewing 3 posts - 1 through 3 (of 3 total)
You must be logged in to reply to this topic.