[juniorParticipant]

Hi Ivo Zhulev,

Can we have this additional feature in angular_jqxtabs in angular 2 addAt(index: number, title: string, content: string): void {
this.host.jqxTabs(‘addAt’, index, title, content);
Instead of only content: string parameter can you add an additional parameter like content:HTMLFile in a tab method?
Thanks.

[juniorParticipant]

Hi Ivo Zhulev,
By looking at this method of angular_jqxtabs you can see there is a “content” parameter of type string and as what I understand it is ‘html element’ mentioned in documentation. So, my question is how to implement that “content” using ‘html element’ format like for example I have a html file Form with lots inputs and validations inside and I will use it to be displayed in a tabpage?
addAt(index: number, title: string, content: string): void {
this.host.jqxTabs(‘addAt’, index, title, content);
}

About the angular_jqxdataAdapter what is the use of still putting it in angular 2?

Thanks.

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

[juniorParticipant]

Hi Ivo Zhulev,

Is angular_jqxdataAdapter is functional in angular 2 and it has the same functionality with query jqxdataAdapter?
Thanks.

[juniorParticipant]

Hi Ivo Zhulev,

Can you show me an example of how to use addAt, addFirst and addLast? I don’t see a demo or in a documentation of how to use those methods using angular 2.

Thanks.

[juniorParticipant]

Hello Peter Stoev,

Where we can find the angular 2 component widgets documentation?

Thanks.

[juniorParticipant]

Hello Peter Stoev,

How to add Tab and Tabpage dynamically in angular 2 Tab component?
Thanks.

[juniorParticipant]

Hello Peter Stoev,

I’m asking why your angular 2 component widgets are still using the old jquery-1.11.1.min.js, in fact there is a new release version of jquery which is 3.1.1? If I’m going to use the latest release of jquery instead of the old one can I still able to run the widgets under angular 2?

Another question I have a problem with assigning the returned query using subscription.

items: any[] ;
this.dataService.getBeverages()
.subscribe((data) => {
this.items.push(data);
});

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

],
id: ‘id’,
localdata: this.items <– The problem is here i cannot assigned values, so when I call the getRecordHierarchy method records is empty.
Thanks.

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

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

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

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

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

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

[juniorParticipant]

how create a dynamic tree using angular_jqxdataAdapter, JSON, dataBind, getrecordshierarchy?

[Author]

Posts