jqxTree Add Child By DIV ID Using JSON - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: addBefore, addto, id, jqxtree, Tree

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

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

Author

jqxTree Add Child By DIV ID Using JSON Posts

November 17, 2014 at 7:57 pm 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.

November 18, 2014 at 1:24 pm 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/

November 22, 2014 at 9:06 pm 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.

November 24, 2014 at 7:31 am 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/

November 30, 2014 at 9:19 pm jqxTree Add Child By DIV ID Using JSON #63540

jqwidgetsdev

Participant

Hello Nadezhda.

Your suggestion works like a charm! Thank you.

Best regards.

Author

Posts

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

You must be logged in to reply to this topic.