jQuery UI Widgets Forums General Discussions jqxTree with any JSON

This topic contains 6 replies, has 4 voices, and was last updated by  svetoslav_borislavov 1 week, 4 days ago.

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

    robf
    Participant

    Hello,
    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

    Thanks

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <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>
    </head>
    	<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
                        };
                    });
                  
                });
            });
        </script>
     
    </head>
    <body class='default'>
        <div id="jqxTree">
        </div>
    </body>
    • This topic was modified 3 years, 7 months ago by  robf.
    • This topic was modified 3 years, 7 months ago by  robf.
    jqxTree with any JSON #105938

    Todor
    Participant

    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,
    Todor

    jQWidgets Team
    https://www.jqwidgets.com

    jqxTree with any JSON #132243

    robf
    Participant

    Hello,

    I’m trying to find information for styling the root and children nodes of jqxtree.

    Using your example here: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtree/index.htm#demos/jqxtree/defaultfunctionality.htm

    How, for example, would I make the root nodes (Mail, Inbox) bold-face and blue, and the child nodes italic and red?

    Any guidance is appreciated.
    Thank you!
    Rob

    jqxTree with any JSON #132244

    Hi,

    You can see all available classes that will help you with the styling of the jqxTree here:
    https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxtree/jquery-tree-styling-and-appearance.htm?search=tree

    Also here is an example for your needs: http://jsfiddle.net/7ojf1mhd/

    Best regards,
    Svetoslav Borislavov

    jQWidgets Team
    https://www.jqwidgets.com/

    jqxTree with any JSON #132246

    robf
    Participant

    Thanks! Looks like a great starting point.

    jqxTree with any JSON #132270

    atonalwilson
    Participant

    The website is so easy to use – I am impressed with it. Thank you for Sharing.

    jqxTree with any JSON #132271

    Hi,

    Thank you for the feedback!
    If you need any further assistance, do not hesitate to contact us!

    Best regards,
    Svetoslav Borislavov

    jQWidgets Team
    https://www.jqwidgets.com/

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

You must be logged in to reply to this topic.