jQuery UI Widgets Forums Navigation Tree nobodys talking about angular_jqxtree

This topic contains 16 replies, has 3 voices, and was last updated by  rlopez 4 years, 9 months ago.

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
  • nobodys talking about angular_jqxtree #88607

    junior
    Participant

    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?

    nobodys talking about angular_jqxtree #88621

    Hristo
    Participant

    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

    nobodys talking about angular_jqxtree #88632

    junior
    Participant

    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.

    nobodys talking about angular_jqxtree #88648

    Hristo
    Participant

    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

    • This reply was modified 5 years, 11 months ago by  Hristo.
    • This reply was modified 5 years, 11 months ago by  Hristo.
    nobodys talking about angular_jqxtree #88652

    junior
    Participant

    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.

    nobodys talking about angular_jqxtree #88698

    Hristo
    Participant

    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

    • This reply was modified 5 years, 10 months ago by  Hristo.
    nobodys talking about angular_jqxtree #88713

    junior
    Participant

    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.

    nobodys talking about angular_jqxtree #88747

    Hristo
    Participant

    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

    nobodys talking about angular_jqxtree #88764

    junior
    Participant

    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,

    nobodys talking about angular_jqxtree #88881

    Hristo
    Participant

    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

    nobodys talking about angular_jqxtree #89134

    junior
    Participant

    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.

    • This reply was modified 5 years, 10 months ago by  junior.
    nobodys talking about angular_jqxtree #89190

    Hristo
    Participant

    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

    nobodys talking about angular_jqxtree #89340

    junior
    Participant

    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.

    • This reply was modified 5 years, 10 months ago by  junior.
    nobodys talking about angular_jqxtree #89476

    Hristo
    Participant

    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

    nobodys talking about angular_jqxtree #89526

    junior
    Participant

    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.

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.