jQWidgets Forums

Tagged: additional data, getRecordsHierarchy, jqxtree, json, Tree

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

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

Author

Custom Fields in Tree source Posts

January 7, 2015 at 10:54 am Custom Fields in Tree source #65059

agm_gosth

Participant

Hi,

I am using the tree widget to render some data.
My code looks like below.

var source =
    {
        datatype: "json",
        datafields: [
            { name: 'id' },
            { name: 'parentid' },
            { name: 'text' },
            { name: 'value' },
            { name: 'html' },
            { name: 'icon' },
            { name: 'iconsize' },
            { name: 'ip'}
        ],
        id: 'id',
        url: "./backend/nav.json",
        async: false
    };
    // 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', 'parentid', 'items', [{ name: 'ip', map: 'ip'}]);

    $('#navigationTree').jqxTree({ source: records});
    $('#navigationTree').jqxTree('expandAll');
    
    $('#navigationTree').on('select', function (event) {
        var args = event.args;
        var item = $('#navigationTree').jqxTree('getItem', args.element);
        console.log("event", event);
        console.log("item", item.id);
        console.log("value", item.value);
        console.log("ip", item.ip);
        $("#mainView").html("<span>" + event.args.element.id + "</span>");
    });

My json

[	{ 
	    "id": "9",
	    "parentid": "1",
	    "text": "bbb",
	    "html": "N407",
	    "icon": "img/x_OK.gif",
	    "iconsize" : "20",
	    "ip" : "0.0.0.0",
	    "value": "$2.3"

	}, 
	{
		"text": "Net",
		"html" : "<span>2</span>",
		"id": "1",
		"parentid": "-1",
		"icon": "img/K_OK.gif",
		"iconsize" : "20",
                "ip" : "0.0.0.1",
		"value": "$2.3"
    }
]

My problem is that i can’t access the ip value on select. Is it possible I’m doing something wrong in theget RecordsHierarchy ??
I have multiple custom values coming from the json that I need to access on select.

Your help will be much appreciated !

Thank you,
Gavril

January 7, 2015 at 11:39 am Custom Fields in Tree source #65066

Nadezhda

Participant

Hello Gavril,

Please, look at ‘getRecordsHierarchy’ method and change the second optional parameter from “ip” to “label” as it’s shown in the following line of code var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'ip', map: 'label' }]);. This parameter specifies the mapping between the Data Source fields and custom data fields.

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

January 7, 2015 at 1:05 pm Custom Fields in Tree source #65078

agm_gosth

Participant

Hi,

Thanks for the answer but this does not fix my problem as it changes the labels from my tree with the ip. I want the ip to be hidden and only to access it on select to make a backend call with it as a param. Except the ip I have additional fields like type, value, url, state …

type, value, url, state – are comming from the json also

console.log(“ip”, item.ip); will return null

Is there any way to map additional values except the below ?

label – sets the item’s label.
value – sets the item’s value.
html – item’s html. The html to be displayed in the item.
id – sets the item’s id.
disabled – sets whether the item is enabled/disabled.
checked – sets whether the item is checked/unchecked(when checkboxes are enabled).
expanded – sets whether the item is expanded or collapsed.
selected – sets whether the item is selected.
items – sets an array of sub items.
icon – sets the item’s icon(url is expected).
iconsize – sets the size of the item’s icon.

Kind regards,
Gavril

January 8, 2015 at 10:30 am Custom Fields in Tree source #65127

Nadezhda

Participant

Hi Gavril,

Here is an example which shows how to access additional data from a JSON source in jqxTree:

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <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">
        $(document).ready(function () {
            var data = [
                {
                    "id": "9",
                    "parentid": "1",
                    "text": "bbb",
                    "html": "N407",
                    "icon": "img/x_OK.gif",
                    "iconsize": "20",
                    "ip": "0.0.0.0",
                    "value": "$2.3"
                },
                {
                    "text": "Net",
                    "html": "<span>2</span>",
                    "id": "1",
                    "parentid": "-1",
                    "icon": "img/K_OK.gif",
                    "iconsize": "20",
                    "ip": "0.0.0.1",
                    "value": "$2.3"
                }
            ]
            // prepare the data
            var source =
        {
            datatype: "json",
            datafields: [
                { name: 'id' },
                { name: 'parentid' },
                { name: 'text' },
                { name: 'value' },
                { name: 'html' },
                { name: 'icon' },
                { name: 'iconsize' },
                { name: 'ip' }
            ],
            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', 'parentid', 'items', [{ name: 'text', map: 'label' }]);
            $('#jqxWidget').jqxTree({ source: records });
            $('#jqxWidget').jqxTree('expandAll');
            $("#jqxWidget").on('select', function (event) {
                var args = event.args;                
                var item = $('#jqxWidget').jqxTree('getItem', args.element);
                var id = args.element.id;
                var ip;
                var recursion = function (object) {
                    for (var i = 0; i < object.length; i++) {
                        if (id == object[i].id) {
                            ip = object[i].ip;
                            break;
                        } else if (object[i].items) {
                            recursion(object[i].items);
                        };
                    };
                };
                 recursion(records);
                 $("#eventLog").text("Id: " + args.element.id + ", Text: " + item.label + ", IP: " + ip);
            });
        });
    </script>
</head>
<body>
    <div id='jqxWidget'>
    </div>
    <div style="margin-top: 50px; font-size: 13px; font-family: Verdana;" id="eventLog">
    </div>
</body>
</html>

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

January 9, 2015 at 7:20 am Custom Fields in Tree source #65164

agm_gosth

Participant

Hi Nadezhda,

Thank you for your help !!! This was what I was looking for.

With kind regards,
Gavril

January 17, 2017 at 1:24 pm Custom Fields in Tree source #90742

snehaljadhav

Participant

I am using jqtree for building tree, w.r.t to above my hiearchy is created.
However i am little confused at
var records = dataAdapter.getRecordsHierarchy(‘id’, ‘parentid’, ‘items’, [{ name: ‘text’, map: ‘label’ }]);
because it will create hiearchy internally, so i get at the root 5 items and internally it has Items array again.
So my question is, how does still recursion function works, because my id never matching

one more thing at this statement
if (id == object[i].id)
i am getting left side id as “jqxWidget86e6b29f” and right side id as source data actual Id.
I am not sure how it will work

January 17, 2017 at 3:03 pm Custom Fields in Tree source #90746

admin

Keymaster

Hi snehaljadhav,

getRecordsHierarchy builds a hierarchy from a Flat list. If you already have a hierarchy, make sure to have the expected datafield members set.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.