jQuery UI Widgets Forums Navigation Tree jqxTree Add Child By DIV ID Using JSON

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • jqxTree Add Child By DIV ID Using JSON #62898

    jqwidgetsdev
    Participant

    Hello.

    In the following example how can I set the element’s DIV ID?

    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtree/treebindingtojson.htm?arctic

    I like to combine it with, the following code adds a new sub item to a tree item by using the item’s ID.

    var elementByID = $('#jqxTree').find("#home")[0];
    $('#jqxTree').jqxTree('addTo', { label: 'Item' }, elementByID);

    Thank you.

    jqxTree Add Child By DIV ID Using JSON #62964

    Nadezhda
    Participant

    Hello jqwidgetsdev,

    Here is an example which shows how to add child element by id using JSON.

    <!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>
    </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' });
    
                    $("#jqxbutton").jqxButton({
                        theme: 'energyblue',
                        width: 200,
                        height: 30
                    });
    
                    $('#jqxbutton').click(function () {
                        var elementByID = $('#2');
                        $('#jqxWidget').jqxTree('addTo', { label: 'Item' }, elementByID);
                    });
                });
            </script>
            <div id='jqxWidget'>
            </div>
            <input type="button" style="margin: 10px;" id="jqxbutton" value="Add new sub item" />
        </div>
    </body>
    </html>

    Best Regards,
    Nadezhda

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

    jqxTree Add Child By DIV ID Using JSON #63176

    jqwidgetsdev
    Participant

    Hello Nadezhda.

    This is not exactly what I am looking for.
    Is there a way to add this new item as the top child item in the tree, so instead of the last item in the sub item?

    Does this make sense?

    Thanks & regards.

    jqxTree Add Child By DIV ID Using JSON #63196

    Nadezhda
    Participant

    Hi jqwidgetsdev,

    Please, find the following examples which show how to add element in jqxTree with method “addBefore” and ‘addTo’.
    1) add element before first parent element

    var elementByID = $('#1');
    $('#jqxWidget').jqxTree('addBefore', { label: 'Item' }, elementByID);

    2) add child element to the first parent element

    var elementByID = $('#1');
    $('#jqxWidget').jqxTree('addTo', { label: 'Item' }, elementByID);

    Best Regards,
    Nadezhda

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

    jqxTree Add Child By DIV ID Using JSON #63540

    jqwidgetsdev
    Participant

    Hello Nadezhda.

    Your suggestion works like a charm! Thank you.

    Best regards.

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

You must be logged in to reply to this topic.