jQuery UI Widgets Forums General Discussions jqxTree with any JSON

This topic contains 1 reply, has 2 voices, and was last updated by  Todor 3 years, 2 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • jqxTree with any JSON #105934


    Can you please tell me if it is possible to create a jqxtree with any arbitrary json object?
    I want to pass a single JSON object and represent it in a user-friendly display but the structure is generally “unknown” meaninbg I may get it from multiple sources for display.

    When I try the code below I get one, non-expandable node that reads ITEM


    <!DOCTYPE html>
    <html lang="en">
        <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" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />	
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../scripts/demos.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>
    	<script type="text/javascript">
    	var myData = 
    			"_id": "5cb0adde9a574370bc397335",
    			"source": "sourcexxx",
    			"state": "active",
    			"modified": "2019-06-11T22:19:18.981Z",
    			"value1": 25,
    			"value2": 24406250,
    			"code": "XXX",
    			"other" : [
    						{x:2, y:3}, 
    						{x:6, y:9}
    		$(document).ready(function () 
                // Create jqxTree
                var tree = $('#jqxTree');
                var source = myData
                tree.jqxTree({ source: source,  height: 300, width: 200 });
                tree.on('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
    <body class='default'>
        <div id="jqxTree">
    • This topic was modified 3 years, 2 months ago by  robf.
    • This topic was modified 3 years, 2 months ago by  robf.
    jqxTree with any JSON #105938


    Hello robf,

    You could review the following demo. It shows how jqxTree is built from JSON data.

    Let us know if you need further assistance.

    Best Regards,

    jQWidgets Team

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.