jQuery UI Widgets Forums Navigation Tree DropDown Tree with JSON

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 9 years, 6 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • DropDown Tree with JSON #64101

    jkapasi
    Participant

    Hello,

    I am trying to get DropDown Tree using JSON data but I am not able to get it using the demos.

    Can I get the expected functionality?

    Regards
    Jash

    DropDown Tree with JSON #64114

    Dimitar
    Participant

    Hello Jash,

    Here is an example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <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" src="../../jqwidgets/jqxdropdownbutton.js"></script>
    </head>
    <body>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    $("#dropDownButton").jqxDropDownButton({ width: 200, height: 25 });
    
                    $('#jqxTree').on('select', function (event) {
                        var args = event.args;
                        var item = $('#jqxTree').jqxTree('getItem', args.element);
    
                        var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + item.label + '</div>';
                        $("#dropDownButton").jqxDropDownButton('setContent', dropDownContent);
                    });
    
                    var data = [
                    { "id": "2",
                        "parentid": "1",
                        "text": "Hot Chocolate",
                        "value": "$2.3"
                    }, {
                        "id": "3",
                        "parentid": "1",
                        "text": "Peppermint Hot Chocolate",
                        "value": "$2.3"
                    }, {
                        "id": "4",
                        "parentid": "1",
                        "text": "Salted Caramel Hot Chocolate",
                        "value": "$2.3"
                    }, {
                        "id": "5",
                        "parentid": "1",
                        "text": "White Hot Chocolate",
                        "value": "$2.3"
                    }, {
                        "text": "Chocolate Beverage",
                        "id": "1",
                        "parentid": "-1",
                        "value": "$2.3"
                    }, {
                        "id": "6",
                        "text": "Espresso Beverage",
                        "parentid": "-1",
                        "value": "$2.3"
                    }, {
                        "id": "7",
                        "parentid": "6",
                        "text": "Caffe Americano",
                        "value": "$2.3"
                    }, {
                        "id": "8",
                        "text": "Caffe Latte",
                        "parentid": "6",
                        "value": "$2.3"
                    }, {
                        "id": "9",
                        "text": "Caffe Mocha",
                        "parentid": "6",
                        "value": "$2.3"
                    }, {
                        "id": "10",
                        "text": "Cappuccino",
                        "parentid": "6",
                        "value": "$2.3"
                    }, {
                        "id": "11",
                        "text": "Pumpkin Spice Latte",
                        "parentid": "6",
                        "value": "$2.3"
                    }, {
                        "id": "12",
                        "text": "Frappuccino",
                        "parentid": "-1"
                    }, {
                        "id": "13",
                        "text": "Caffe Vanilla Frappuccino",
                        "parentid": "12",
                        "value": "$2.3"
                    }, {
                        "id": "15",
                        "text": "450 calories",
                        "parentid": "13",
                        "value": "$2.3"
                    }, {
                        "id": "16",
                        "text": "16g fat",
                        "parentid": "13",
                        "value": "$2.3"
                    }, {
                        "id": "17",
                        "text": "13g protein",
                        "parentid": "13",
                        "value": "$2.3"
                    }, {
                        "id": "14",
                        "text": "Caffe Vanilla Frappuccino Light",
                        "parentid": "12",
                        "value": "$2.3"
                    }]
    
                    // prepare the data
                    var source =
                    {
                        datatype: "json",
                        datafields: [
                            { name: 'id' },
                            { name: 'parentid' },
                            { name: 'text' },
                            { name: 'value' }
                        ],
                        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'}]);
                    $('#jqxTree').jqxTree({ source: records, width: '300px' });
                });
            </script>
            <div id="dropDownButton">
                <div id='jqxTree' style="border: none;">
                </div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.