jqwidgets and angular 5 item select event call double

Question

I use angular and jqwidgets to create dropdownbutton, When I fixed the html code for the tree everything is ok, but when I use json Source, OnSelect event is repeated 2 times, so how should I fix it?

export class myDropDownComponent implements AfterViewInit {

      @ViewChild('myDropDownButton') myDropDownButton: jqxDropDownButtonComponent;
      @ViewChild("treeReference") tree: jqxTreeComponent;

      treeSource =
        [
            {
                icon: "", label: "Mail", expanded: true, value : "1",
                items:
                [
                    { icon: "", label: "Calendar", value : "11" },
                    { icon: "", label: "Contacts", selected: true, value : "12" }
                ]
            },
            {
                icon: "", label: "Inbox", expanded: true, value : "2",
                items:
                [
                    { icon: "", label: "Admin",value : "21" },
                    { icon: "", label: "Corporate",value : "22" },
                    { icon: "", label: "Finance" ,value : "23"},
                    { icon: "", label: "Other",value : "24" },
                ]
            }
        ];



 treeSettings: jqwidgets.TreeOptions =
    {
        width: "300px",
        height: "370px",
        source: this.treeSource,        
    } 

    ngAfterViewInit(): void {   
        this.tree.createComponent(this.treeSettings);       
        this.tree.onSelect.subscribe(x => this.treeOnSelect(x));
    }

    treeOnSelect(event: any): void {      
        // THIS EVENT REPEATED 2 TIMES
        let item = this.tree.getItem(event.args.element);
        console.log(item.value);
    }
}

score 2 · Answer 1 · answered Mar 29 '18 at 08:09

You bind to this event in two places. Once on "this.tree.onSelect.subscribe" and second time with "treeOnSelect(event: any)".

I saw on their website is suggested to add as an attribute to the component:

<jqxTree #myTree(onSelect)="Select($event)" [width]="300">
...

and in the component is implemented as:

export class AppComponent {
    Select(event: any): void 
    {
        // Do Something
    }    
}

jqwidgets and angular 5 item select event call double

1 Answers1