jqxTree AngularJS Directive - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: #angularjsDirective, #jqxtree, #jsonObject, add item, addto, Angular, angular tree, angularjs, data source, id, jquery tree, jqx-settings, jqxtree, json, ng-repeat, parent id, refresh, remove item, removeItem, scope, source, Structure, Tree

This topic contains 19 replies, has 3 voices, and was last updated by Dimitar 8 years, 8 months ago.

Viewing 15 posts - 1 through 15 (of 20 total)

1 2 →

Author

jqxTree AngularJS Directive Posts

March 8, 2016 at 4:53 pm jqxTree AngularJS Directive #82234

Sravanthi

Participant

Hi,
I am trying to build a jqxtree as angularjs directive with JSON data,

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../scripts/angular.min.js"></script>
    <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>
    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);
        demoApp.controller("demoController", function ($scope) {
            var testData = [{
                id: "1",
                label: "Item 1",
                expanded: true,
                items: [{
                    id: "1.1",
                    label: "Item 1.1"
                }, {
                    id: "1.2",
                    label: "Item 1.2",
                    selected: true
                }]
            }, {
                id: "2",
                label: "Item 2"
            }, {
                id: "3",
                label: "Item 3"
            }, {
                id: "4",
                label: "Item 4",
                items: [{
                    id: "4.1",
                    label: "Item 4.1"
                }, {
                    id: "4.2",
                    label: "Item 4.2"
                }]
            }, {
                id: "5",
                label: "Item 5"
            }, {
                id: "6",
                label: "Item 6"
            }, {
                id: "7",
                label: "Item 7"
            }];

            $scope.mySettings = {
                source: testData,
                width: '300px',
                select: function (event) {
                    var item = $scope.tree.getItem(event.args.element);
                    $('#log').text('Selected item: ' + item.label);
                }
            };
        });
    </script>
</head>
<body>
    <div ng-controller="demoController">
        <jqx-tree jqx-settings="mySettings" jqx-instance="tree"></jqx-tree>
    </div>
    <div id="log">
    </div>
</body>
</html>

I am following the same demo for my jqxTree.
but my json object when converted to string, it is something like this.

 { "Data": "P",
     "Item": [
              { "Text": "value",
                "Desc": "descValue"},
              { "Text": "value",
                "Desc": "descValue"},
                { "Text": "value",
                "Desc": "descValue"},
                { "Text": "value",
                "Desc": "descValue"},
                { "Text": "value",
                "Desc": "descValue"}
               ],

        "xmlns": "" 
       }

My JSON object doesnot have id or parent id to give the hierarchy,
I would like to display the jqxtree with the list of “Item” objects in it, where the “value” as each item label.

Please give me some example to portray my data in the jqxtree.

March 9, 2016 at 8:38 pm jqxTree AngularJS Directive #82292

Sravanthi

Participant

Can someone reply to this, please.

March 10, 2016 at 1:15 pm jqxTree AngularJS Directive #82325

Dimitar

Participant

Hello Sravanthi,

I think you should modify your data to structurally resemble the supported jqxTree formats, as shown in the jqxTree demos. You can process your existing JSON object and create a new one from it, which to use to populate the tree.

Best Regards,
Dimitar

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

March 11, 2016 at 5:56 pm jqxTree AngularJS Directive #82382

Sravanthi

Participant

Hi,

Can I hook up my JSON data to jqxtree using ng-repeat with the li list tag?

as mentioned in this post?

I did not find the exact way for jqxtree generation using json data without id and parentid in it.

Or please give me an example of how can I do it.

Thanks.

March 14, 2016 at 7:40 am jqxTree AngularJS Directive #82411

Dimitar

Participant

Hi Sravanthi,

Unfortunately, ng-repeat is not supported. If you can provide us with an actual (not mockup) JSON data you wish to load the tree from, we will try to guide you how to process it.

Best Regards,
Dimitar

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

March 14, 2016 at 9:09 pm jqxTree AngularJS Directive #82453

Sravanthi

Participant

Hi Dimitar,

The actual JSON data might be this

 var data =
[
{ "text": "Hot Chocolate",
"value": "$3.7"
}, {
"text": "Peppermint Hot Chocolate",
"value": "$2.9"
}, {
"text": "Salted Caramel Hot Chocolate",
"value": "$2.4"
}, {
"text": "White Hot Chocolate",
"value": "$2.2"
}, {
"text": "Chocolate Beverage",
"value": "$2.3"
},{
"text": "Caffe Americano",
"value": "$2.3"
}, {
""text": "Caffe Latte",
  "value": "$2.3"
}
];

March 15, 2016 at 6:14 am jqxTree AngularJS Directive #82458

Dimitar

Participant

Hi Sravanthi,

A jqxTree can be loaded with this data, but the items would not have any hierarchy. For such cases, I suggest using jqxListBox instead.

Nevertheless, here is how to load this data in jqxTree:

<!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>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function ()
            {
                var data = [{
                    "text": "Hot Chocolate",
                    "value": "$3.7"
                }, {
                    "text": "Peppermint Hot Chocolate",
                    "value": "$2.9"
                }, {
                    "text": "Salted Caramel Hot Chocolate",
                    "value": "$2.4"
                }, {
                    "text": "White Hot Chocolate",
                    "value": "$2.2"
                }, {
                    "text": "Chocolate Beverage",
                    "value": "$2.3"
                }, {
                    "text": "Caffe Americano",
                    "value": "$2.3"
                }, {
                    "text": "Caffe Latte",
                    "value": "$2.3"
                }];

                for (var i = 0; i < data.length; i++)
                {
                    data[i].id = i;
                    data[i].parentid = -1;
                }

                // 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' });
            });
        </script>
        <div id='jqxWidget'>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

March 15, 2016 at 4:22 pm jqxTree AngularJS Directive #82499

Sravanthi

Participant

Thank you Dimitar for the quick response.

It is working fine, can you also suggest me how to parse this type of JSON data to jqxtree or JqxListbox either.

var data = { 
               "Hot Chocolate": {
                    "text": "Hot Chocolate",
                    "value": "$3.7"
                },
              "Peppermint Hot Chocolate":  {
                    "text": "Peppermint Hot Chocolate",
                    "value": "$2.9"
                }, 
              "Salted Caramel Hot Chocolate": {
                       "text": "Salted Caramel Hot Chocolate",
                       "value": "$2.4"
                }, 
              "White Hot Chocolate": { 
                       "text": "White Hot Chocolate",
                        "value": "$2.2"
                },
              "Chocolate Beverage": {
                        "text": "Chocolate Beverage",
                        "value": "$2.3"
                },
            "Caffe Americano": {
                    "text": "Caffe Americano",
                    "value": "$2.3"
                }, 
           "Caffe Latte": {
                    "text": "Caffe Latte",
                    "value": "$2.3"
                }
          }

March 16, 2016 at 6:16 am jqxTree AngularJS Directive #82507

Dimitar

Participant

Hi Sravanthi,

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/jqxlistbox.js"></script>
    <script type="text/javascript">
        $(document).ready(function ()
        {
            var data = {
                "Hot Chocolate": {
                    "text": "Hot Chocolate",
                    "value": "$3.7"
                },
                "Peppermint Hot Chocolate": {
                    "text": "Peppermint Hot Chocolate",
                    "value": "$2.9"
                },
                "Salted Caramel Hot Chocolate": {
                    "text": "Salted Caramel Hot Chocolate",
                    "value": "$2.4"
                },
                "White Hot Chocolate": {
                    "text": "White Hot Chocolate",
                    "value": "$2.2"
                },
                "Chocolate Beverage": {
                    "text": "Chocolate Beverage",
                    "value": "$2.3"
                },
                "Caffe Americano": {
                    "text": "Caffe Americano",
                    "value": "$2.3"
                },
                "Caffe Latte": {
                    "text": "Caffe Latte",
                    "value": "$2.3"
                }
            }

            var parsedData = [],
                id = 0;

            for (var item in data)
            {
                parsedData.push({ text: data[item].text, value: data[item].value, id: id, parentid: -1 });
                id++;
            }

            // prepare the data
            var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'id' },
                        { name: 'parentid' },
                        { name: 'text' },
                        { name: 'value' }
                    ],
                    id: 'id',
                    localdata: parsedData
                };

            // 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' });

            $('#jqxListBox').jqxListBox({ width: 300, autoHeight: true, source: dataAdapter, displayMember: 'text', valueMember: 'value' });
        });
    </script>
</head>
<body>
    <div id='content'>
        <p>
            jqxTree</p>
        <div id='jqxTree'>
        </div>
        <br />
        <p>
            jqxListBox</p>
        <div id="jqxListBox">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

June 18, 2016 at 11:50 am jqxTree AngularJS Directive #85235

nayanadas

Participant

I have issue while updating json data in jQxTree angularjs.

Here i’m trying to append nodes to child nodes in angularJS. When i try to append nodes to parent node, it works, but when appended to child nodes. it doesn’t work. Please find the code in plunker.

Please help with a solution.

June 20, 2016 at 5:44 am jqxTree AngularJS Directive #85245

Dimitar

Participant

Hello nayanadas,

Please try adding items by calling the method addTo and deleting items by calling removeItem. These methods are documented in the jqxTree API documentation. You learn how to call widget methods in an AngularJS environment from the Invoking Methods section of the help topic jQWidgets Integration with AngularJS.

Best Regards,
Dimitar

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

June 20, 2016 at 6:36 am jqxTree AngularJS Directive #85248

nayanadas

Participant

Hi Dimitar,

Thanks for your reply. I have already tried the method addTo as follows:
var obj = {
id: “8”,
label: “Item 8”
};
var treeElement = $scope.tree.getSelectedItem().element
$scope.tree.addTo(obj, treeElement)
$scope.tree.render();

The new object was added to the child node, but it didn’t update the jsondata. Please check the updated plunker

Thank you in advance.

June 21, 2016 at 5:27 am jqxTree AngularJS Directive #85285

Dimitar

Participant

Hi nayanadas,

Please apply the following modification to $scope.addNode:

$scope.addNode = function() {
    var obj = {
        id: "8",
        label: "Item 8"
    }

    if ($scope.testData[0].items[0].items) {
        $scope.testData[0].items[0].items.push(obj);
    } else {
        $scope.testData[0].items[0].items = [obj];
    }

    $scope.mySettings.source = $scope.testData;
    $scope.mySettings.refresh(['source']);

    console.log("Changed Json : " + angular.toJson($scope.testData));
};

And here is the complete Plunker example: https://plnkr.co/edit/Frw3JLzQUBJhbEM7PNpb?p=preview. We hope this solution is helpful to you.

Best Regards,
Dimitar

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

June 21, 2016 at 7:44 am jqxTree AngularJS Directive #85308

nayanadas

Participant

Hi Dimitar,

Thank you so much for your solution. It worked perfectly.

June 21, 2016 at 8:21 am jqxTree AngularJS Directive #85312

nayanadas

Participant

Hi Dimitar,

I have one more doubt. Your solution works fine in click function, but when i tried it in ‘expand’ function, the same object is appended as child nodes repeatedly. What i need is, when i double click on a child node, the jsondata is appended to that child node without repeating. How can I implement that. Please check out the plunker

Thanking you in advance.

Author

Posts

Viewing 15 posts - 1 through 15 (of 20 total)

1 2 →

You must be logged in to reply to this topic.