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

Tagged: Angular directive, angular tree, angularjs, event, jqx tree, jqxtree, json, select, source

This topic contains 7 replies, has 2 voices, and was last updated by Dimitar 8 years, 11 months ago.

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

Author

jqxTree Angular Directive with Json Posts
December 17, 2015 at 2:42 pm jqxTree Angular Directive with Json #79462

rao
Participant

Hi JQWidgets Team,
Do we have any working sample for jqxTree as Angular Directive consuming hierarchy data ?
I have referred many of the discussions in this forum, but nothing helped me.

Can you pls help me here?

I see only ‘Item’ labeled nodes almost 30+ but not the actual Lables i have given, and NO hierarchy as well. 🙁

my HTML has below tag for tree

<jqx-tree jqx-create="true" jqx-settings="mySettings"></jqx-tree>

Below is my controller code.
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

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” }
];

var dataAdapter = new $.jqx.dataAdapter(testData);

var records = dataAdapter.getRecordsHierarchy(‘id’, ‘items’);

$scope.mySettings = {
source: records,
width: ‘300px’
};
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Regards,
Rao.

December 17, 2015 at 2:52 pm jqxTree Angular Directive with Json #79466

rao
Participant

Hi Team,

Further to my query above, i am seeking for the ‘select’ event handle as well.

In jquery model it works as follows :

$(‘#jqxTree’).on(‘select’,function (event){
var args = event.args;
var item = $(‘#jqxTree’).jqxTree(‘getItem’, args.element);
alert(“selected item”+item);
}

How can we achieve the same with Angular Directive implementation (<jqx-tree> )?

Regards,
Rao.

December 18, 2015 at 6:12 am jqxTree Angular Directive with Json #79482
Dimitar
Participant
Hi Rao,

Please refer to the following example that (hopefully) answers both your questions:
```
<!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>
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
December 18, 2015 at 6:40 am jqxTree Angular Directive with Json #79484

rao
Participant

Hi Dimitar,
Thanks for the quick response.
Sorry to say, this code didn’t work for me.
I am getting 30+ nodes in the tree as flat list; all are labeled as ‘Item’ only.
Just curious to check, if this works for you? Or any version dependency for this to work ?
we have jqxTree.js of v3.5.0.

Regards,
Rao

December 18, 2015 at 6:52 am jqxTree Angular Directive with Json #79486

Dimitar
Participant

Hi Rao,

The example works perfectly fine on our side with the latest version of jQWidgets (3.9.1). Please update your jQWidgets files and test it again.

Best Regards,
Dimitar

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

December 18, 2015 at 7:29 am jqxTree Angular Directive with Json #79490

rao
Participant

Hi Dimitar,
This is really quick response, thanks a lot. Let me try out with the latest version (3.9.1) as you recommended; and update on this forum with the findings.

Regards,
Rao.

December 18, 2015 at 9:19 am jqxTree Angular Directive with Json #79504

rao
Participant

Hi Dimitar,
It worked with v3.9.1. Tree is shown with the proper hierarchy & Correct labels given for the Node names.
Thank you for providing the info.

But, the select event is not working. especially for below line. As we see, there is no definition/declaration for $scope.tree.
so it says, ‘getItem’ is on undefined.
var item = $scope.tree.getItem(event.args.element);

When i read the ‘event.args.element’ it gives me entire ‘html’ code for the node;
viz.,
<li id=”3″ role=”treeitem” class=”jqx-tree-item-li” style=”margin-left: 16px;” aria-selected=”true”><div style=”display: inline-block;” class=”draggable jqx-rc-all jqx-tree-item jqx-item jqx-fill-state-pressed jqx-tree-item-selected”>Item 3</div>

There from i can extract only ‘id’ attribute. But assume if i have to introduce few more/custom attributes to my JSON node, will i be able to access them as well ? If yes How?
My node data going to be as follows :
+++++++++++++++++++++++++++++++++++++++++

{
“id”: “phk_hlkm”,
“value”: “solution”,
“label”: “History Loader”,
“type”: “primary”,
“items”:
[
{
“id”: “phk_hlkm/1.5.20”,
“value”: “version”,
“label”: “1.5.20”,
“type”: “secondary”,
“items”:
[
]
}
]
}
+++++++++++++++++++++++++++++++++++++++
Regards,
Rao.

December 18, 2015 at 11:35 am jqxTree Angular Directive with Json #79508
Dimitar
Participant
Hi Rao,

Please make sure that the jqx-instance directive is part of the tree’s declaration:

<jqx-tree jqx-settings="mySettings" jqx-instance="tree"></jqx-tree>

You can also explicitly define $scope.tree:
```
$scope.tree = {};
$scope.mySettings = {
    source: testData,
    width: '300px',
    select: function (event) {
        var item = $scope.tree.getItem(event.args.element);
        $('#log').text('Selected item: ' + item.label);
    }
};
```
I suggest you copy and test our example in its entirety.

Best Regards,
Dimitar

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

Posts

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

You must be logged in to reply to this topic.