jQWidgets Forums

This topic contains 4 replies, has 2 voices, and was last updated by ettemlevest 11 years, 1 month ago.

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

Author

Populate jqxTree with json from PHP Posts

February 24, 2014 at 9:48 am Populate jqxTree with json from PHP #49973

Participant

I’m trying to populate jqxTree from a php script like in the Tree binding to json demo. This is my code:

var wddBongeszoSource = {
		type: 'POST',
 		datatype: 'json',
 		datafields: [
 			{ name: 'id', type: 'int' },
			 { name: 'szulo', type: 'int' },
			 { name: 'label', type: 'string' },
			{ name: 'value', type: 'int' },
 			{ name: 'icon', type: 'string' }
		 ],
		 id: 'id',
		 url: 'url-to-my-php-script'
 	};
	var wddBongeszoDataAdapter = new $.jqx.dataAdapter(wddBongeszoSource);
	wddBongeszoDataAdapter.dataBind();
	var records = wddBongeszoDataAdapter.getRecordsHierarchy('id', 'szulo', 'items');
	console.log(records);
	$('#wddBongeszo').jqxTree({ height: winH-100, width: 250 });

I get this json script from the php:
[{"id":"1","szulo":"0","label":"first","value":"1","icon":"url-to-icon"},{"id":"4","szulo":"0","label":"third","value":"3","icon":"url-to-icon"},{"id":"2","szulo":"0","label":"second","value":"2","icon":"url-to-icon"}]

After the getRecordsHierarchy() call the records value is null. Where is my mistake?

Thanks,
Imre

February 24, 2014 at 10:14 am Populate jqxTree with json from PHP #49977

Peter Stoev

Keymaster

Hi Imre,

The error is here:

var records = wddBongeszoDataAdapter.getRecordsHierarchy(‘id’, ‘szulo’, ‘items’);

When you call the “getRecordsHierarchy”, the dataAdapter’s binding is not yet completed, because the binding is Asynchronous i.e through Ajax. Set the source object’s async: false to make it Synchronous i.e the binding to be completed when you call “getRecordsHierarchy”.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 24, 2014 at 10:29 am Populate jqxTree with json from PHP #49979

ettemlevest

Participant

Hi Peter,

Thank you for your fast reply!

With your help getRecordsHierarchy() is working. Records variable is getting the right value. After that I added the source object to the Tree:
$('#wddBongeszo').jqxTree({ height: winH-100, width: 250, source: wddBongeszoDataAdapter });

But I got this in the Tree everytime. I tried to modify the json returned from the php but the result is same: 47 ‘Items’ and 1 ‘>’ at the 16th row. What can be the problem?

Thanks,
Imre

February 24, 2014 at 10:57 am Populate jqxTree with json from PHP #49983

Peter Stoev

Keymaster

Hi Imre,

Here’s a demo which shows how to load your data into jqxTree:

<!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" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.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>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var data = [{ "id": "1", "szulo": "0", "label": "first", "value": "1", "icon": "url-to-icon" }, { "id": "4", "szulo": "0", "label": "third", "value": "3", "icon": "url-to-icon" }, { "id": "2", "szulo": "0", "label": "second", "value": "2", "icon": "url-to-icon" }];

                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'id', type: 'number' },
                        { name: 'szulo', type: 'number' },
                        { name: 'label', type:'string' },
                        { name: 'value', type: 'number' }
                    ],
                    id: 'id',
                    localdata: data
                };

                // create data adapter.
                var dataAdapter = new $.jqx.dataAdapter(source);
                // perform Data Binding.
                dataAdapter.dataBind();
                // get the tree items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents 
                // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter 
                // specifies the mapping between the 'text' and 'label' fields.  
                var records = dataAdapter.getRecordsHierarchy('id', 'szulo', 'items');
                $('#jqxWidget').jqxTree({ source: records, width: '300px'});
            });
        </script>
        <div id='jqxWidget'>
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 24, 2014 at 11:14 am Populate jqxTree with json from PHP #49986

ettemlevest

Participant

Thank you very much!

After I set the correct source (records from the getRecordsHierarchy) to the Tree I got the right results

Best Regards,
Imre

Author

Posts

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

You must be logged in to reply to this topic.