This is a migrated thread and some comments may be shown as answers.

Async Loading of Hierachical Treeview using axios

1 Answer 91 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
JIG
Top achievements
Rank 1
JIG asked on 25 Sep 2019, 02:04 PM

I'm trying to load a hierarchical treeview from an external source, but I'm having difficulties loading the first node childs and most likey the inner childs aswell (but this I don't know yet..).

The data is loaded through axios, so the RxJS Observable methods won't work. I tried may different things but when I'm expanding the first node the spinner just keeps on spinning until eternity.

Some of the points that I have tried

- Tried to assign the parent node with the childeren
- Tried an async modifier
- Tried many different things with hasChilderen function

 

console keeps on printing: TypeError: this.childeren(...).pipe is not a function

Hopefully someone can point me in the right direction.

 

 

 

My code:

location.model.ts

export interface Location {
    locationId: string;
    locationTypeId: number;
    shortName: string;
    plantCode: string;
    hasChildLocations: boolean;
 
    icon: string;
    isSelected: boolean;
 
    childeren: Location[];
}

location.service.ts

export class LocationService {
  async getBaseLocation(): Promise<Location[]> {
    return await axios.get<Location>('/Location/GetBaseLocation')
      .then((response: AxiosResponse<Location>) => {
        return [response.data];
      });
  }
 
  async getChildLocations(locationId: string): Promise<Location[]> {
    return await axios.get<Location[]>(`/Location/GetLocationTree?UpperLocationID=${locationId}`)
      .then((response: AxiosResponse<Location[]>) => response.data);
  }
}

tree.component.ts

export class TreeComponent implements OnInit {
  public locations: Promise<Location[]>
 
  constructor(private locationService: LocationService,
    private cdRef: ChangeDetectorRef) { }
 
  ngOnInit() {
    this.locations = this.locationService.getBaseLocation();
  }
 
  public hasChildren = (item: Location): boolean => item.hasChildLocations;
 
  public fetchChildren = (item: Location): Promise<Location[]>  => this.locationService.getChildLocations(item.locationId);
}

tree.component.html

<kendo-treeview [nodes]="locations | async" [textField]="['shortName']" kendoTreeViewExpandable
  [hasChildren]="hasChildren" [children]="fetchChildren">
</kendo-treeview>

1 Answer, 1 is accepted

Sort by
0
Svet
Telerik team
answered on 27 Sep 2019, 11:03 AM

Hi Jimmy,

Thank you for the provided details.

The reason for the error is that the function passed to the [children] input property should be an Observable. In order to convert a Promise to an Observable we can use the from operator as demonstrated in the following StackOverflow thread:

https://stackoverflow.com/questions/39319279/convert-promise-to-observable

I modified the example from the following article:

https://www.telerik.com/kendo-angular-ui/components/treeview/data-binding/#toc-remote-heterogeneous-data

in order to simulate the use of Promises to receive the remote data. First I used the toPromise() function to convert the Observables to Promises and then converted the fetchProducts() function back to an Observable (using the from operator) so that it can be passed to the [children] input property (in in categories.service.ts:):

  public fetchCategories() {
    return this.fetch(`${this.BASE_URL}/Categories`).toPromise();
  }

  public fetchProducts(categoryID: number) {
    return from(this.fetch(`${this.BASE_URL}/Categories(${categoryID})/Products`).toPromise());
  }

Please check the demo at the following link:

https://stackblitz.com/edit/angular-xelpje?file=app/app.component.ts

I hope this helps.

Regards,
Svetlin
Progress Telerik

Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
TreeView
Asked by
JIG
Top achievements
Rank 1
Answers by
Svet
Telerik team
Share this question
or