jQuery UI Widgets Forums Navigation Tree Custom Fields in Tree source

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • 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

    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/

    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

    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/

    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

    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

    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

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

You must be logged in to reply to this topic.