In this post, we will show you how to load jqxTree Items on demand. The tree items that we are going to load are located in 2 different files – ajax1.htm and ajax2.htm.
ajax1.htm
[{"label": "Folder 1" },{"label": "Folder 2" },{"label": "Folder 3" },{"label": "Folder 4" }]
ajax2.htm
[{"label": "Folder 5" },{"label": "Folder 6" },{"label": "Folder 7" },{"label": "Folder 8" }]
Now, lets create the jqxTree. We populate it with one root item, and 2 sub items. Each sub item has a fake item which displays “Loading…”. That item will be displayed until the sub items are fully loaded. The fake item’s value is set to point to the url of the file where the sub items are located.
var tree = $('#jqxTree');var source = [{ label: "Root", expanded: true, items: [ { label: "Root Folder 1", items: [{ value: "ajax1.htm", label: 'Loading...'}] }, { label: "Root Folder 2", items: [{ value: "ajax2.htm", label: 'Loading...'}] } ]}];tree.jqxTree({ source: source, theme: theme });
The next step is to bind to the jqxTree’s ‘expand’ event. In the event’s callback function, we check whether the expanded item has a ‘Loading…’ sub item. If there’s such item, we request the new items via Ajax and append them to the jqxTree.
tree.bind('expand', function (event) { var $element = $(event.args.element); var loader = false; var loaderItem = null; var children = $element.find('li'); $.each(children, function () { var item = tree.jqxTree('getItem', this); if (item.label == 'Loading...') { loaderItem = item; loader = true; return false }; }); if (loader) { $.ajax({ url: loaderItem.value, success: function (data, status, xhr) { var items = jQuery.parseJSON(data); tree.jqxTree('addTo', items, $element[0]); tree.jqxTree('removeItem', loaderItem.element); } }); }});
Here’s the result when the user expands an item:
The result when the new items are loaded:
The full source code:
<!DOCTYPE html><html lang="en"><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.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 theme = getTheme(); // Create jqxTree var tree = $('#jqxTree'); var source = [{ label: "Root", expanded: true, items: [ { label: "Root Folder 1", items: [{ value: "ajax1.htm", label: 'Loading...'}] }, { label: "Root Folder 2", items: [{ value: "ajax2.htm", label: 'Loading...'}] } ] }]; tree.jqxTree({ source: source }); tree.bind('expand', function (event) { var $element = $(event.args.element); var loader = false; var loaderItem = null; var children = $element.find('li'); $.each(children, function () { var item = tree.jqxTree('getItem', this); if (item.label == 'Loading...') { loaderItem = item; loader = true; return false }; }); if (loader) { $.ajax({ url: loaderItem.value, success: function (data, status, xhr) { var items = jQuery.parseJSON(data); tree.jqxTree('addTo', items, $element[0]); tree.jqxTree('removeItem', loaderItem.element); } }); } }); }); </script></head><body class='default'> <div id="jqxTree"> </div></body></html>
