nobodys talking about angular_jqxtree

[juniorParticipant]

hi peter,

anybody here using angular_jqxtree, angular_jqxdataAdapter with JSON external file inside a class?
please let me know.

if no one, please peter can you show how?

[HristoParticipant]

Hello junior,

I would like to suggest you look at this demo:
http://www.jqwidgets.com/jquery-widgets-demo/demos/angularjs-demos/angular-grid/angularjs-grid-binding-to-json.htm?light
You could use this example as approach there is showing how to bind to JSON in AngularJS. And should change settings of the Grid with those of the Tree.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[juniorParticipant]

hi Hristo,
sorry, i cannot relate this demo into angular 2 with typescript.
please can you show me an actual script using angular 2 with typescript? since you are trying to integrate your product to angular 2 can you show how? like angular_jqxtree, json external file as a source data, angular_jqxdataAdapter, and dataBind inside a component. whats the purpose if you still introducing your javascript example in fact we are talking about angular 2 here. please answer me using an angular 2 way.

thanks.

[HristoParticipant]

Hello junior,

I would like to ask you post topics related to Angular 2 in the relevant section.

Please, take a look at the example below. It is based on our demos of the Angular 2.
app.module.ts:

import { NgModule} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { jqxExpanderComponent } from 'components/angular_jqxexpander';
import { jqxTreeComponent } from 'components/angular_jqxtree';

@NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent, jqxExpanderComponent, jqxTreeComponent],
    bootstrap: [AppComponent]
})

export class AppModule { }

app.component.ts:

/// <reference path="components/jqwidgets.d.ts" />
import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import {jqxExpanderComponent} from 'components/angular_jqxexpander';
import {jqxTreeComponent} from 'components/angular_jqxtree';

@Component({
    selector: 'my-app',
    template: '<angularExpander #expanderReference>' + 
                  '<div>' 
                      'Folders' +
                  '</div>' +
                  '<div style="overflow: hidden;">' +
                      '<angularTree #treeReference></angularTree>' +
                  '</div>' +
                '</angularExpander>'
})

export class AppComponent implements AfterViewInit
{
	@ViewChild('expanderReference') expander: jqxExpanderComponent;
    @ViewChild('treeReference') tree: jqxTreeComponent;

    data = [
            { "id": "2",
                "parentid": "1",
                "text": "Hot Chocolate",
                "value": "$2.3"
            }, {
                "id": "3",
                "parentid": "1",
                "text": "Peppermint Hot Chocolate",
                "value": "$2.3"
            }, {
                "id": "4",
                "parentid": "1",
                "text": "Salted Caramel Hot Chocolate",
                "value": "$2.3"
            }, {
                "id": "5",
                "parentid": "1",
                "text": "White Hot Chocolate",
                "value": "$2.3"
            }, {
                "text": "Chocolate Beverage",
                "id": "1",
                "parentid": "-1",
                "value": "$2.3"
            }, {
                "id": "6",
                "text": "Espresso Beverage",
                "parentid": "-1",
                "value": "$2.3"
            }, {
                "id": "7",
                "parentid": "6",
                "text": "Caffe Americano",
                "value": "$2.3"
                }, {
                "id": "8",
                "text": "Caffe Latte",
                "parentid": "6",
                "value": "$2.3"
            }, {
                "id": "9",
                "text": "Caffe Mocha",
                "parentid": "6",
                "value": "$2.3"
                }, {
                "id": "10",
                "text": "Cappuccino",
                "parentid": "6",
                "value": "$2.3"
            }, {
                "id": "11",
                "text": "Pumpkin Spice Latte",
                "parentid": "6",
                "value": "$2.3"
                }, {
                "id": "12",
                "text": "Frappuccino",
                "parentid": "-1"
            }, {
                "id": "13",
                "text": "Caffe Vanilla Frappuccino",
                "parentid": "12",
                "value": "$2.3"
                }, {
                "id": "15",
                "text": "450 calories",
                "parentid": "13",
                "value": "$2.3"
            }, {
                "id": "16",
                "text": "16g fat",
                "parentid": "13",
                "value": "$2.3"
                }, {
                "id": "17",
                "text": "13g protein",
                "parentid": "13",
                "value": "$2.3"
            }, {
                "id": "14",
                "text": "Caffe Vanilla Frappuccino Light",
                "parentid": "12",
                "value": "$2.3"
            }
        ];
		
		expanderSettings: jqwidgets.ExpanderOptions =
		{
			width: '300px',
			height: '370px',
			showArrow: false,
			toggleMode: 'none'
		};
		
        // prepare the data
        source =
        {
            datatype: "json",
            datafields: [
                { name: 'id' },
                { name: 'parentid' },
                { name: 'text' },
                { name: 'value' }
            ],
            id: 'id',
            localdata: this.data
        };
		
        // create data adapter.
        dataAdapter = new $.jqx.dataAdapter(this.source, {
			autoBind: true
	    });		
		records = this.dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);
		
		treeSettings: jqwidgets.TreeOptions =
		{
			width: '100%',
			height: '100%',
			source: this.records
		}        
}

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[juniorParticipant]

Hello Hristo,
by the way thank you, but still not satisfied, i still have questions?
Your javascript code:
// create data adapter.
dataAdapter = new $.jqx.dataAdapter(this.source, {
autoBind: true
});
records = this.dataAdapter.getRecordsHierarchy(‘id’, ‘parentid’, ‘items’, [{ name: ‘text’, map: ‘label’}]);

Have you examine your ts file angular_jqxdataadapter.ts?
there’s a lot of methods inside and etc,
getRecordsHierarchy(arg?: (id:number, parentField:number, name?:string, map?:any ) => any[]) : any
dataBind(arg?: () => void) : any
records(arg?: Array<any>) : any
createWidget(options: any): void
datafields(arg?: Array<jqwidgets.DataAdapterDataFields>) : any
datatype(arg?: string) : any
id(arg?: string) : any
localdata(arg?: any) : any
data(arg?: jqwidgets.DataAdapterData) : any
autoBind(arg?: boolean) : any
url(arg?: string) : any
Why not using this angular_jqxdataadapter instead of the javascript code? as i examined the script inside the ts file its more suitable
if you’re using angular 2. Please, can you show me how to use all those methods that i have shown and then pass those settings to angular_jqxtree?
Thanks.

[HristoParticipant]

Hello junior,

I create and test the shared example above and it works fine.
You could recreate this one, it is based on this demo. Just need to set new data and to use:

dataAdapter = new $.jqx.dataAdapter(this.source, {
	autoBind: true
});

records = this.dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);

After that set records to property source of the Tree – source: this.records.

The jqxDataAdapter is not a widget, this is a plug-in.
Also, on that way it is more recognizable (new $.jqx.dataAdapter(source)). And it will be less confusing for our users.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[juniorParticipant]

Hello Hristo,
thanks for your response, why not using the angular 2 angular_jqxdataAdapter? is there a major problem of using that component? if any, please advice. i’m much more comfortable of using the angular_jqxdataAdapter component rather than a traditional way. if you know how, please make an example of that component together with the angular 2 angular_jqxtree component.

Thanks.

[HristoParticipant]

Hello junior,

As mentioned previously it is a plug-in. It is created in a different way, unlike the Widgets.
And it is possible “angular_jqxdataAdapter” will be removed in the next version.
I will be happy to help you with another question.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[juniorParticipant]

Hello Hristo,
thanks, when will be the release of the next version of jqwidgets? i found so many errors especially the angular 2 version of the components.
please, can you show me using the example above how to create a lazy loading, folder icons using method getRecordsHierarchy() in angular_jqxtree?

thanks,

[HristoParticipant]

Hello junior,

You could find more in our Roadmap.
Unfortunately, we do not have such example, but you could try this approach.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[juniorParticipant]

Hello Hristo,
Currently I have this problem, I’m asking your help about this matter.
I’m using json-server as my fake REST api server. I created a db.json and the fields are the following(id, parentid, description).
Please look the scripts below:
interface.ts
export interface IBeverage{
id: number;
parentId: number;
description: string;
}

data.service.ts
@Injectable()
export class DataService {
_baseUrl: string = ”;
constructor(private http: Http,
private itemsService: ItemsService,
private configService: ConfigService) {
this._baseUrl = configService.getApiURI();
}
getBeverages(): Observable<IBeverage[]> {
return this.http.get(this._baseUrl)
.map((res: Response) => {
return res.json();
})
.catch(this.handleError);
}

app.module.ts
@NgModule({
imports: [BrowserModule,
HttpModule,
FormsModule,
],
declarations: [AppComponent,
jqxExpanderComponent,
jqxTreeComponent],
providers: [
ConfigService,
DataService,
ItemsService,
MappingService,
NotificationService
],
bootstrap: [AppComponent]
})

app.component.ts
@Component({
selector: ‘my-app’,
template: `<angularExpander #expanderReference>
<div>
Folders
</div>
<div style=”overflow: hidden;”>
<angularTree #treeReference></angularTree>
</div>
</angularExpander>`,

styles: [`
angularTree > div:first-child
{
height: 100%;
border: none;
}
`]
})

export class AppComponent implements AfterViewInit {

@ViewChild(‘expanderReference’) expander: jqxExpanderComponent;
@ViewChild(‘treeReference’) tree: jqxTreeComponent;

beverages: IBeverage[];

addingUser: boolean = false;
constructor(private dataService: DataService,
private itemsService: ItemsService,
private notificationService: NotificationService) { }

ngAfterViewInit() {

this.dataService.getBeverages()
.subscribe((beverages: IBeverage[]) => {
this.beverages = beverages;
console.log(this.beverages);
},
error => {
this.notificationService.printErrorMessage(‘Failed to load beverages. ‘ + error);
});
this.expander.createWidget(this.expanderSettings);
this.tree.createWidget(this.treeSettings);
this.tree.selectItem(null);
}

expanderSettings: jqwidgets.ExpanderOptions =
{
width: ‘300px’,
height: ‘370px’,
showArrow: false,
toggleMode: ‘none’
};

// prepare the data
source =
{
datatype: “json”,
datafields: [
{ name: ‘id’ },
{ name: ‘parentid’ },
{ name: ‘description’ }

],
id: ‘id’,
url: this.beverages

};

// create data adapter.
dataAdapter = new $.jqx.dataAdapter(this.source, {
async: false,
autoBind: true,
});
records = this.dataAdapter.getRecordsHierarchy(‘id’, ‘parentid’, ‘items’, [{ name: ‘description’, map: ‘label’}]);

treeSettings: jqwidgets.TreeOptions =
{
width: ‘100%’,
height: ‘100%’,
source: this.records
};

My question is when I call console.log inside ngAfterViewInit() and inside the getBeverages() method to subscribe, it returns an object array with data by assigning it to the variable that I declared.
But when I assigned the beverages variable that I declared above into (source=datatype:”json”, url: this.beverages) it cannot be detected, its something like empty or null, What is lacking here?

I’m looking forward regarding this matter. Thanks.

[HristoParticipant]

Hello junior,

We cannot check each one project. Also, in this case, it does not depend on our widgets (rather it focuses on ‘Angular 2’).
But what I see in your code (in subscribe) you set “this.beverages = beverages;” instead of this.beverages.push(data);.
You could try to check what data you set in your variable (of type Array).
Hope this helps.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[juniorParticipant]

Hello Hristo,
I’ve tried your suggestion instead of this.beverages=beverages use this.beverages.push(data) but still doesn’t work.
When I display the result using console.log(this.beverages) inside ngAfterViewInit() method , the result is like this Array(object, object, object, object….).
So I’m sure the variable “beverages” is not empty. When I assigned it using your way of getting the source like
// prepare the data
source =
{
datatype: “json”,
datafields: [
{ name: ‘id’ },
{ name: ‘parentid’ },
{ name: ‘description’ }
],
id: ‘id’,
url: this.beverages <= This is my current problem it can’t be assigned I don’t know why.
};
I know url: this.beverages has no data because when I call dataAdapter = new $.jqx.dataAdapter(this.source, {
async: false,
autoBind: true,
});
records = this.dataAdapter.getRecordsHierarchy(‘id’, ‘parentid’, ‘items’, [{ name: ‘description’, map: ‘label’}]);

No records or data have been displayed inside the tree.

Thanks.

[HristoParticipant]

Hello junior,

About the mentioned issue (url: this.beverages <= This is my…), need to set URL value (of type string).
this.beverages – now this is an Array.
Hope this helps.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[juniorParticipant]

Hello Hristo,

About the mentioned issue (url: this.beverages <= This is my…), need to set URL value (of type string).
this.beverages – now this is an Array. As what you have said.
What do you call this previous example of yours? Is this not an array? Please refer it to your previous example above.
data = [
{ “id”: “2”,
“parentid”: “1”,
“text”: “Hot Chocolate”,
“value”: “$2.3”
}, {
“id”: “3”,
“parentid”: “1”,
“text”: “Peppermint Hot Chocolate”,
“value”: “$2.3”
}, {
“id”: “4”,
“parentid”: “1”,
“text”: “Salted Caramel Hot Chocolate”,
“value”: “$2.3”
}, {
“id”: “5”,
“parentid”: “1”,
“text”: “White Hot Chocolate”,
“value”: “$2.3”
}, {
“text”: “Chocolate Beverage”,
“id”: “1”,
“parentid”: “-1”,
“value”: “$2.3”
}, {
“id”: “6”,
“text”: “Espresso Beverage”,
“parentid”: “-1”,
“value”: “$2.3”
}, {
“id”: “7”,
“parentid”: “6”,
“text”: “Caffe Americano”,
“value”: “$2.3”
}, {
“id”: “8”,
“text”: “Caffe Latte”,
“parentid”: “6”,
“value”: “$2.3”
}, {
“id”: “9”,
“text”: “Caffe Mocha”,
“parentid”: “6”,
“value”: “$2.3”
}, {
“id”: “10”,
“text”: “Cappuccino”,
“parentid”: “6”,
“value”: “$2.3”
}, {
“id”: “11”,
“text”: “Pumpkin Spice Latte”,
“parentid”: “6”,
“value”: “$2.3”
}, {
“id”: “12”,
“text”: “Frappuccino”,
“parentid”: “-1”
}, {
“id”: “13”,
“text”: “Caffe Vanilla Frappuccino”,
“parentid”: “12”,
“value”: “$2.3”
}, {
“id”: “15”,
“text”: “450 calories”,
“parentid”: “13”,
“value”: “$2.3”
}, {
“id”: “16”,
“text”: “16g fat”,
“parentid”: “13”,
“value”: “$2.3”
}, {
“id”: “17”,
“text”: “13g protein”,
“parentid”: “13”,
“value”: “$2.3”
}, {
“id”: “14”,
“text”: “Caffe Vanilla Frappuccino Light”,
“parentid”: “12”,
“value”: “$2.3”
}
];

Thanks.

[Author]

Posts