There might be a case where user wants to add data to jqxtree on click of each individual node. Below is the code which help us to achieve the above functionality where user can get data from JSON file or database on click of each individual tree node , depending whether parent have child nodes or not.

<script type="text/javascript">
        $(document).ready(function () {
            var theme = "";
            // Create jqxTree
            var tree = $('#topictree');
            var source = null;
            $.ajax({
                async: false,
                url: "topic.php",
                success: function (data, status, xhr) {
                    source = jQuery.parseJSON(data);
                }
            });

            tree.jqxTree({ source: source, theme: theme, height: 600, width: 400 });
            tree.bind('expand', function (event) {
                var label = tree.jqxTree('getItem', event.args.element).label;
                var $element = $(event.args.element);
                var loader = false;
                var loaderItem = null;
                var children = $element.find('ul:first').children();
                $.each(children, function () {
                    var item = tree.jqxTree('getItem', this);
                    if (item && 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>

<div id="topictree">
</div

Data for root node has to be in following format :

[{
"label": "Root", "expanded": "true",
"items": [
    { "label": "apple", "items": [{ "value": "topic.php", "label": "Loading..." }] },
    { "label": "orange", "items": [{ "value": "topic.php", "label": "Loading..." }] }]
}]

Data for nodes having child nodes has to be in following format :

[
{ "label": "apple_1", "items": [{ "value": "topic.php", "label" : "Loading..." } ] },
{ "label": "orange_1", "items": [{ "value": "topic.php", "label" : "Loading..." } ] },
{ "label": "carrot", "items": [{ "value": "topic.php", "label" : "Loading..." } ] }
]

If parent have no child nodes data has to be in following format :

  [
{"label": "orange" },
{"label": "apple" },
{"label": "carrot" },
{"label": "radish" }
]

• Please look into the format of data for each node depending on whether they have child nodes or not because format of JSON being returned back differ a bit accordingly.