jQuery UI Widgets Forums Navigation Tree jqxTree AngularJS Directive

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

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
  • 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.

    jqxTree AngularJS Directive #82292

    Sravanthi
    Participant

    Can someone reply to this, please.

    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/

    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.

    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/

    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"
    }
    ];
    
    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/

    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"
                    }
              }
    
    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/

    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.

    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/

    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.

    • This reply was modified 4 years, 10 months ago by  nayanadas. Reason: format
    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/

    jqxTree AngularJS Directive #85308

    nayanadas
    Participant

    Hi Dimitar,

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

    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.

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

You must be logged in to reply to this topic.