Async Loading of Hierachical Treeview using axios

[JIG]

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>

[Svet]

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