In this post, we’ll create a jqxTree widget and will save its selection when a button is clicked in a cookie.
After the page is reloaded, we’ll check the cookie for a stored tree item and will select it.
1. The first step is to include the JavaScript and CSS files.
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /><link rel="stylesheet" href="../../jqwidgets/styles/jqx.darkblue.css" type="text/css" /><script type="text/javascript" src="../../scripts/jquery-1.7.1.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>
2. The second step is to initialize the jqxTree and jqxButton widgets.
var source = [ { label: "Mail", expanded: true, items: [ { label: "Calendar" }, { label: "Contacts", selected: true } ] }, { label: "Inbox", expanded: true, items: [ { label: "Admin" }, { label: "Corporate" }, { label: "Finance" }, { label: "Other" }, ] }, { label: "Deleted Items" }, { label: "Notes" }, { label: "Settings" }, { label: "Favorites" }, ];// create jqxTree.$('#jqxTree').jqxTree({ source: source, width: '250px', theme: 'darkblue' });// create jqxButton. $('#Button').jqxButton({ theme: 'darkblue' });
3. The third and most important step is to implement the save and load logic. We’ll save the selected tree item’s label, when the user clicks a button. After reloading the page, we check for a stored value with ‘key’ equal to ‘jqxTree’. If there’s such value, we find the associated tree item and select it by using the ‘selectItem’ method of the jqxTree. In the code below, we use the jqx.cookie function which accepts 3 params, ‘key’, ‘value’ and cookie options.
// load the selected tree item when the page is reloaded.var selectedItem = $.jqx.cookie.cookie("jqxTree");if (selectedItem) { var items = $("#jqxTree").jqxTree('getItems'); $.each(items, function () { if (this.label == selectedItem) { $('#jqxTree').jqxTree('selectItem', this.element); return false; } });}// save the selected tree item when the button is clicked.$('#Button').click(function () { var selectedItem = $('#jqxTree').jqxTree('selectedItem'); $.jqx.cookie.cookie("jqxTree", selectedItem.label, null);});
4. Below is the full source code:
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.darkblue.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.7.1.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: "Mail", expanded: true, items: [ { label: "Calendar" }, { label: "Contacts", selected: true } ] }, { label: "Inbox", expanded: true, items: [ { label: "Admin" }, { label: "Corporate" }, { label: "Finance" }, { label: "Other" }, ] }, { label: "Deleted Items" }, { label: "Notes" }, { label: "Settings" }, { label: "Favorites" }, ]; // create jqxTree. $('#jqxTree').jqxTree({ source: source, width: '250px', theme: 'darkblue' }); // create jqxButton. $('#Button').jqxButton({ theme: 'darkblue' }); // load the selected tree item when the page is reloaded. var selectedItem = $.jqx.cookie.cookie("jqxTree"); if (selectedItem) { var items = $("#jqxTree").jqxTree('getItems'); $.each(items, function () { if (this.label == selectedItem) { $('#jqxTree').jqxTree('selectItem', this.element); return false; } }); } // save the selected tree item when the button is clicked. $('#Button').click(function () { var selectedItem = $('#jqxTree').jqxTree('selectedItem'); $.jqx.cookie.cookie("jqxTree", selectedItem.label, null); }); }); </script></head><body> <div id='jqxTree'> </div> <input id="Button" type="button" value="Save Selected Item" /></body></html>
