Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Amos Silberman
1165
Angular2 and late binding
posted

Hi,

I am trying to use the igTree with an angular 2 app. 
When I try to bind the data to the dataSource with data that comes from a remote server (or a button click for the matter), the tree is left empty.

If I set the data in the constructor - it all work fine.
I used the samples from the github page :

I set the data in the constructor to an empty array, and load the data on a button click through the loadData() method:

 

constructor() {
// this.data = ProductCategories.getData();

 this.data = [];

   this.newProductCategory= {  "Name": "",
      "ProductCategoryID": this.data.length+1, 
      "ProductSubcategories":[]   
};
      
   this.newProductSubcategory={
      "Name": "",
      "ProductSubcategoryID": 0
 };
           this.options = {
               dataSource: this.data,
               bindings: {
                   childDataProperty : "ProductSubcategories",
                   textKey : "Name",
                   valueKey : "ProductCategoryID"
 }
           };

}
   loadData(){
       this.data = ProductCategories.getData();
       this.options.dataSource = this.data;
   }

 

Any help will be welcomed

Thank

Parents
No Data
Reply
  • 18204
    Offline posted

    Hi amos_silberman,

    Thank you for posting in our forums!

    Just setting the dataSource will not notify the igTree that it needs to render its data.  You will need to call the dataBind method on the tree as well.

    You can do this with the following code:


    jQuery('#tree1').igTree("dataBind");

    If that does not work, you may also need to set the dataSource through the jQueryUI widget options and not with "this.options.dataSource".  The code for this looks like:


    jQuery('#tree1').igTree("option", "dataSource", this.data);

    If you need further assistance with this, please let me know and I will be glad to help you.

Children