jQuery UI Widgets Forums Navigation Tree How to expand a tree item where source is JSON?

This topic contains 2 replies, has 2 voices, and was last updated by  Henning 9 years, 7 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • Henning
    Participant

    Hi,
    I just started trying out your widgets and must say I realy like it 🙂

    Is it possible to expand a tree item during init when source is JSON?

    Thanks,
    Henning


    Nadezhda
    Participant

    Hello Henning,

    You can not expand items during the tree initialization when source is JSON because dataAdapter may have not bound data. Here is an example which shows how to expand item after initialization:

    <!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="../../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": "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' }]);
                    $('#jqxWidget').jqxTree({ source: records, width: '300px' });
                    // Expand item with id="1"
                    $("#jqxWidget").jqxTree('expandItem', $("#1")[0]);
                });
            </script>
            <div id='jqxWidget'>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Nadezhda

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


    Henning
    Participant

    Thanks 🙂

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

You must be logged in to reply to this topic.