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
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.
Hi, Sorry for the late reply...If this is the case for the igTree or any other control for that matter, I don't really see why to use the angular 2 components that you provide.I still need to keep the reference to the element, and still need to data bind, on every data source change (and for data that is fetched from the server, even for the first data). I can't really see the benefit of using these components right now.For most cases it means create my own component on top of the component that you provide, so I can keep the reference to the element.I can encapsulate the JQuaery controls myself and make my own component, with a lot less code, and much more suitable for my needs.
Am I missing something? Is there any plan to change this behavior, or to make a proper angular 2 controls?Thanks
Hi, I am experiencing the exact same issue. How come dataSource can be set for Angular2 IgGrid but doesn't work for IgTree? Both have two-way data-binding according to the github documentation. Will this issue be resolved? It seems to defeat the purpose of using the Angular 2 version with the solution provided. Thank you.
Hello,
How about not specifying dataSource in this.options and set it as a separate attribute:
<ig-tree [options]="treeOpts" [(dataSource)]="products" [(widgetId)]='id'></ig-tree>
and then use the service provider to populate "products".
Please review the attached sample and let me know if you have additional questions.