JqxTree

[strimpsterParticipant]

I was messing around using the most recent version of the API files (v 3.5) and I can’t seem to get the Angular directive to work for a jqxTree. No matter what I use for the source, it always displays a list of 34 items that display the text ‘Item’. I dove into the minified files and I think that I figured out what the problem is. The jqxTree only works with source values that are an array and the Angular directive converts all source references (via jqx-source or jqx-settings source property) to a data adapter (which the jqxTree does not work with).

After making a very minor change to the minified file, I was able to properly use the directive for a jqxTree. Basically, I just passed the type of widget to the method that converts the source to a data adapter (jqxangular.js lines 63, 148, 152 in Chrome’s pretty printed version). In the part of that method that was seeing if it was already a data source and if so it doesn’t modify it, I put a check to also see if the type of widget was a jqxTree and if so it would also not change it (jqxangular.js line 66 in Chrome’s pretty printed version).

I’m hoping that you guys can resolve this issue as I’m looking to upgrade our enterprise license to this version as we are starting to really use a lot of Angular in our projects. Thanks.

[Peter StoevKeymaster]

Hi strimpster,

Thanks for your post. Yes, if you set source, a dataAdapter is generated. However, I would suggest you to look at: http://www.jqwidgets.com/licenseagreement/ before using our code because making changes in our code is prohibited.

Best Regards,
Peter Stoev

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

[strimpsterParticipant]

Peter-

Thank you for your response. The changes identified were as a courtesy to you and your team as a potential solution to this defect, not meant to be taken as we were planning on going forward with such a change.

Is your team planning on fixing this so that the jqxTree works properly with your AngularJS directive?

[Peter StoevKeymaster]

Hi strimpster,

jqxTree works properly with AngularJS now, too. Example: . If we find something wrong when you set its source property, we will resolve it in future release.

Best Regards,
Peter Stoev

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

[strimpsterParticipant]

I’m not sure if there was supposed to be an example shown above, but here is a jsfiddle that shows the issue: http://jsfiddle.net/320s27qL/.

It shows that when using the jqxTree directive provided by the library currently, the tree is incorrectly built as I described in the first post. I created an example directive using the exact same settings object and it properly creates the jqxTree.

[Peter StoevKeymaster]

Hi strimpster,

The Tree is supposed to work in the way shown in the example http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxangular/tree.htm?arctic. It is not supposed to work in other ways.

Best Regards,
Peter Stoev

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

[bobmazzoParticipant]

I’m also struggling with this and would love to see more sample code where the adapter fetches from an Api method, then binds to the tree once the data is available (a promise)

[bobmazzoParticipant]

My question about the angular tree is that if your demo ONLY uses the ul and li tags to create an html list, which is hard coded into the HTML as seen below, then how do we hook up a data-fetch type of method to the tree widget.
In other words, if I fetch nested JSON from my server, is there no support for binding JSON ?

<div ng-controller="demoController">
        <jqx-tree jqx-width="'300px'" jqx-height="'300px'">
                <ul>
                    <li id='home'>Home</li>
                    <li item-expanded='true'>Solutions
                        <ul>
                            <li>Education</li>
                            <li>Financial services</li>
                            <li>Government</li>
                            <li>Manufacturing</li>
                            <li>Solutions
                                <ul>
                                    <li>Consumer photo and video</li>
                                    <li>Mobile</li>
                                    <li>Rich Internet applications</li>
                                    <li>Technical communication</li>
                                    <li>Training and eLearning</li>
                                    <li>Web conferencing</li>
                                </ul>
                            </li>
                            <li>All industries and solutions</li>
                        </ul>
                    </li>
                </ul>   
             </jqx-tree>
          </div>

[Peter StoevKeymaster]

The features which we support are demonstrated in the demos. In case something requires some improvement, changes or anything else, we will probably do that in a future release depending on our roadmap and internal development plans. Thank you for writing.

Best Regards,
Peter Stoev

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

[bobmazzoParticipant]

Hi strimpster,
I see your jsfiddle with the new direct, ‘exampleJqxTree’, but where is the actual modified js file ? I’m curious to see how you got it working with your ‘localData’ array.
thanks.
Bob

[strimpsterParticipant]

Bob-

As Peter mentioned, it is a violation of their license agreement to modify their code, so I can’t post the changes identified in the initial post any more than what was already mentioned. If you want to use the jqxTree with a ‘localData’ array, you will have to create your own directive (like my example on jsfiddle) as the one maintained by the jqwidgets team does not currently support doing so.

[strimpsterParticipant]

Bob-

Here is an example for you where you can write your own custom directive to handle having a ‘localData’ array and change the tree whenever you resolve your promise: http://jsfiddle.net/1eqrsmxg/1/.

[bobmazzoParticipant]

I approached it from a ng-repeat prospective, and with the help of Peter, I got it to worked.
Here’s the jsfiddle showing how to hook up your json array using ng-repeat with the li list tag: http://jsfiddle.net/robertmazzo/4582335n/

The html essentially looks like this :

<div ng-app="App" ng-controller="myController">
    <jqx-tree jqx-data="kriData" jqx-height="300">
        <ul>
            <li ng-repeat="kriGroup in data">{{kriGroup.group}}
                <ul ng-if="kriGroup.kris">
                    <li ng-repeat="kri in kriGroup.kris">{{kri.kri}}</li>
                </ul>
            </li>
        </ul>
     </jqx-tree>   
</div>
<br>

and my Json data :

angular.module('App', ['jqwidgets'])
.controller('myController', function ($scope) {
    $scope.kriData = [
            {
            "group": "99_HSVaR",
            "kris": [
                {
                "kri": "1D"
                },
                {
                "kri": "1D CR"
                },
                {
                "kri": "1D EQ"
                },
                {
                "kri": "1D EUR/USD"
                }
            ]
            },
            {
            "group": "Additive",
            "kris": [
                {
                "kri": "MCS"
                }
            ]
            }                        
        ];       
})

[SravanthiParticipant]

The jsfiddle is not showing anything, can anyone show how to display the jqxtree with json data through ng-repeat in li tag?

[Author]

Posts