jQWidgets Forums

jQuery UI Widgets › Forums › General Discussions › jqxTree with any JSON

Tagged: , , ,

This topic contains 6 replies, has 4 voices, and was last updated by  svetoslav_borislavov 2 years, 2 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    jqxTree with any JSON Posts
  • July 1, 2019 at 8:42 pm 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>
    July 2, 2019 at 8:30 am 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

    January 18, 2023 at 5:02 am 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

    January 18, 2023 at 6:44 am jqxTree with any JSON #132244

    svetoslav_borislavov
    Participant

    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/

    January 18, 2023 at 11:30 am jqxTree with any JSON #132246

    robf
    Participant

    Thanks! Looks like a great starting point.

    January 24, 2023 at 7:14 pm jqxTree with any JSON #132270

    atonalwilson
    Participant

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

    January 25, 2023 at 5:33 am jqxTree with any JSON #132271

    svetoslav_borislavov
    Participant

    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/

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.