[bobmazzoParticipant]

My JQWidget plunk is located here: http://plnkr.co/users/robertmazzo/plunks

and my jsfiddle is here: http://jsfiddle.net/robertmazzo/4582335n/4/

[bobmazzoParticipant]

Hi Peter,
I would like to do exactly what you said in your reply: “you will have to set the Grid’s width property again.”

If see in your docs how to set the width, but I cannot seem to reset the widget on-the-fly. See sample line here :

$('#section1').jqxGrid().width(900);

FYI: What’s also interesting is that after I expand my div, once I manually widen one of the grid columns, then the grid automatically refreshes and expands to fit my div !

[bobmazzoParticipant]

Hi Peter,
I’m trying here to create a jsfiddle:

This is a previous jsfiddle that I had created with a jqx-tree, and now I have added a jqx-chart. I cannot get the chart to display, even after adding jqxchart.js to the external library list.

I also trying to create a plunker here with a basic Bootstrap nav menu, but also cannot get the jqx widgets to work:

thank you,

Bob

[bobmazzoParticipant]

My apologies for not posting my Angular js code as well.
Here’s my jqwGrid init code where I set the width :

   var myColumnsJQ = gridHierarchyService.getColumnDefsJQ(reportType, data);
    myModel["localData"] = myData;
    var dataAdapter = new $.jqx.dataAdapter(myModel);
    vm.jqGridHierSettings = {       // jqwidgets grid settings binded to html
                altrows: true,
                sortable: true,
                columnsResize: true,
                editable: true,
                showToolbar: false,
                width: '100%',         // SET WIDTH HERE !!
                height: 400,
                source: dataAdapter,
                columns: myColumnsJQ  
            };

I’d like to somehow increase the width on-the-fly to fill out the outer div. i.e. The user can “expand” the outer div, and it would be nice if the jqxGrid could be automatically reset to fill out the outer div.

Kind regards,

Bob

[bobmazzoParticipant]

Yes, Peter. I do see the jqx-data attrib now in your button demo. Sorry, it was a bit hard to find, so thank you for pointing that out.

If you check your emails, you’ll see that I downloaded your jqw 3.5 angular release on Sept 24th. You even sent me a welcome email.

Perhaps you’re referring to my original download back in June, but I was never able to get one single widget to work in the Angular environment. And when I tried to post to your forums, I kept getting a “page not found” error. I had emailed regarding that error many times, but never got a response. It was only recently that I created a new user id (“bobmazzo”) in addition to my old one (“robertmazzo”), that I was finally able to get into the forums.

Anyhow, I hope you understand – and thank you again for your time.

best regards.
Bob

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

[bobmazzoParticipant]

Hello Dimitar,
I’m integrating your angular version of grid/treegrid/dropdown/tree widgets, but for the straight grid I do NOT see the basic CRUD operations.
Also in your regular grid demos, where is the option for adding a row (i.e. create a blank row) ?
Is this the one ? http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm?%28arctic%29#demos/jqxgrid/createremoveupdatedata.htm

thanks.

Bob

[bobmazzoParticipant]

Also great news for others to read.
Using ng-if I’m able to nest the list as follows : http://jsfiddle.net/robertmazzo/4582335n/

<jqx-tree id="kriTree" jqx-data="vm.kriServerDataJson" jqx-width="'250px'" jqx-height="'500px'">
    <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>      

[bobmazzoParticipant]

Thank you Peter !
And in addition, you added the jqx-data attribute, which I can’t find in any of your demos (although there’s the jqx-data-table under datatables demo).

Perhaps some more angular examples with these hidden gems can be added to your documentation. This will be extremely helpful to prospective buyers as myself.

best regards.

Bob

[bobmazzoParticipant]

Here, for example, if you comment out the ng-repeat line, and uncomment the hard-coded ul data – the tree render fine !
However, using ng-repeat for some reason renders an empty tree.

<jqx-tree jqx-width="'300px'" jqx-height="'300px'">
    <ul><li ng-repeat="kriGroup in vm.kriServerDataJson">{{kriGroup.group}}</ul>                                                    
    <!--<ul>
	    <li>99_HSVaR</li>
	    <li>Additive</li>
	    <li>AsianCrisis</li>
	    <li>Bump_FX_1bp</li>
	    <li>CDSStress A</li>
	    <li>CDSStress AA</li>
	    <li>CDSStress AAA</li>
	    <li>CDSStress BBB</li>
	    <li>CS01</li>
	    <li>CVaR</li>
	    <li>Counterparty Sensitivity</li>
	    <li>EUR_USD by EUR</li>
	    <li>EUR_USD by EUR Long</li>
	    <li>EUR_USD by EUR Short</li>
	    <li>EUR_USD by USD</li>
	    <li>EconomicCapital</li>
	    <li>ExpectedLoss</li>
	    <li>GBP_Non_Parallel</li>
	    <li>GREEKS</li>
	    <li>LTCM</li>
	    <li>MTM</li>
	    <li>PV01</li>
	    <li>RussianCrisis</li>
	    <li>Simulated</li>
	    <li>SimulatedGross</li>
	    <li>USD_Non_Parallel</li>
	    <li>Vega_1bp_1yr</li>
	    <li>Vega_1bp_EUR_USD</li>
    </ul>-->                                                    
</jqx-tree>

[bobmazzoParticipant]

hi Peter,
I’m trying to get this jsfiddle to work the same as your demo, as well as another example using ng-repeat to create the ul list.
Can you please direct me as to where I’m going wrong here ? http://jsfiddle.net/robertmazzo/s9snLu9m/

thank you very much !

Bob

[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

[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>

[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]

Hello,
I’m looking for an Angular-based example of how to wire up the tree widget from nested Json, with this data sample :

`[
{
“group”: “99_HSVaR”,
“kris”: [
{
“kri”: “1D”
},
{
“kri”: “1D CR”
},
{
“kri”: “1D EQ”
}
]
},
{
“group”: “Additive”,
“kris”: [
{
“kri”: “MCS”
}
]
}
]`

I have defined an empty object at the top of my Angular controller js file :

‘vm.kriSourceTree = {};’

and my activate code fetches the data form the server :

`activate();

function activate() {
var promises = [ getKriListFromServer() ];
common.activateController(promises, controllerId)
.then(function () { log(‘Activated Report Maint View’); });
}`

then further down, I use the $q promise to fetch data then configure the data adapter :

` function getKriListFromServer() {
// Get KRI list from server, transform into Tree Json format.
datacontext.getKriList().then(function (data) {
if (data.status == ‘FAIL’) {
if (data.messages.length > 0) {
logErr(“Error retrieving KRI list: ” + data.messages[0]);
return;
}
}
else {
var jsonData = reportsContext.parseKriJsonData(data.data);
configureKriDataAdapter(jsonData);
}
});
}
function configureKriDataAdapter(data) {
// define the data model
var source = {
id: “id”,
//url: <url>
datafields: [
{ name: ‘group’, type: ‘string’ },
{ name: ‘kri’, type: ‘string’ },
{ name: ‘kris’, type: ‘array’ }
],
hierarchy: {
root: ‘children’
},
localdata: data,
datatype: “json”
};
// bind model to adapter
var dataAdapter = new $.jqx.dataAdapter(source);

// configure tree settings (see jqx-settings=”vm.kriSourceTree” in html)
vm.kriSourceTree = {
checkboxes: true,
//height: ‘300px’, width: ‘300px’,
source: dataAdapter
};
}`

At this point my jq tree is empty. Perhaps my binding is not in the correct order ?

thanks.

Bob

[Author]

Posts