Need help loading treeview with remote, flat data

[Jennifer]

I was trying to follow the provided example for using the treeview with flat data.  However, I keep getting this error "this.originalData.slice is not a function
    at FlatDataBindingDirective.set [as nodes] '

 

My data is flat and remote (the example was local data).  Here is my code in the component:  

@Component({
selector: 'app-treeview',
styles: [`
:host {
height: 600px;
overflow: auto;
}
`],
template: `
<kendo-treeview
[nodes]="myitem"
textField="Text"
kendoTreeViewExpandable
kendoTreeViewFlatDataBinding
idField="ItemID"
parentIdField="ParentId">
</kendo-treeview>
`
})
export class TestTreeComponent implements OnInit {
public myitems: Observable<any[]>;
constructor(private myitemService: myItemsService) { }
public ngOnInit(): void {
this.myitems= this.myitemService.getMyItemss();
}

And in the service:

getMyItems(): Observable<any> {
return this.http.get(this.globalService.getURLRoot() + this.urlRoute)
.map( res => {
this.data = res;
return this.data;
});
}

 

I have also tried removing the Observables with the same result.  I know the data can be retrieved because if I change "[nodes]="myitem"" to "[nodes]="myitem | async", all the items are returned with no hierarchy structure.

 

thank you.

 

 

 

 

[Dimiter Topalov]

Hi Jennifer,

The described error seems to be caused by the fact that the [nodes] input is not bound to an actual JavaScript Array instance (thus there is no "slice()" method). The built-in directive that converts the flat data to a hierarchical structure expects an array of items with the respective id and parentId fields to create the hierarchy accordingly.

You can subscribe to the observable, returned from the service and assign the "myItem" field the TreeView is bound to the resulting array, e.g.:

https://stackblitz.com/edit/angular-6mdk19-x7zmmy?file=app/app.component.ts

Also the provided snippets suggest some discrepancies (maybe typos) in the naming:

@Component({

selector: 'app-treeview',

styles: [`

:host {

height: 600px;

overflow: auto;

}

`],

template: `

<kendo-treeview

[nodes]="myitem"

textField="Text"

kendoTreeViewExpandable

kendoTreeViewFlatDataBinding

idField="ItemID"

parentIdField="ParentId">

</kendo-treeview>

`

})

export class TestTreeComponent implements OnInit {



public myitems: Observable<any[]>;



constructor(private myitemService: myItemsService) { }

public ngOnInit(): void {

this.myitems= this.myitemService.getMyItemss();

}

 

And in the service:

 

getMyItems(): Observable<any> {

return this.http.get(this.globalService.getURLRoot() + this.urlRoute)

.map( res => {

this.data = res;

return this.data;

});

}

To sum up - the TreeView [nodes] property should be bound to an Array. This can be done either by returning an Array of items from the service, returning an Observable, but subscribing to it and extracting the actual array (like in the example above), or by consuming the Observable directly in the template via async:

https://stackblitz.com/edit/angular-6mdk19-9nqmab?file=app/app.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Jennifer]

Thank you for your reply.  I have tried both of your examples and am still getting the same response.  I believe you are correct and the problem lies in the way my data is returned.  I think I need more specifics on return the data.

I can run your example but when I try to grab my data from database (instead of using your local data) it doesn't return correctly.  Can you please point out what I need to change?

Here is the code from my service and I think that is where the problem is:

getTreeCERs() {
  return this.http.get(this.globalService.getURLRoot() + this.urlRoute)
  .map( res => {
    this.data = res;
    return this.data;
    });

 

Here is the component code( I have tried many different combinations of things trying to get it to work):

@Component({
    selector: 'app-treeview',
    styles: [`
:host {
            height: 600px;
overflow: auto;
        }
    `],
    template: `
     <kendo-treeview
        [nodes]="treeNodes"
        textField="Text"
        kendoTreeViewExpandable
        kendoTreeViewFlatDataBinding
        idField="CERID"
        parentIdField="ParentID">
    </kendo-treeview>
  `
})
export class TestTreeComponent {
    public treeNodes;

    constructor(private service: CERsService) {   }
    ngOnInit() {
        this.service.getTreeCERs().subscribe(r => this.treeNodes = r );
    }

thank you

[Svet]

Hi Jennifer,

Check some of the online available articles, that demonstrate how to use Angular 2+ HTTP requests with Observables:

https://scotch.io/tutorials/angular-2-http-requests-with-observables

https://angular.io/tutorial/toh-pt6

A common debugging method is to check what is returned from the server by console logging the result as follows:

getTreeCERs() {
  return this.http.get(this.globalService.getURLRoot() + this.urlRoute)
  .map( res => {
    this.data = res;
    console.log(this.data);
    return this.data;
    });

I hope this points you in the right direction of getting the data from the server. Let us know in case further assistance is required for the built in features of Kendo Ui for Angular.

Regards,
Svetlin
Progress Telerik

[Jennifer]

Thanks.  Yes, debugged my code and the log shows all the data returned correctly.  It just isn't being displayed.  I have 23 items of data returned with an ID and ParentID.  I have specified the field names for ID and ParentID and checked their spelling.  I'm not sure why the tree is not being populated.

[Jennifer]

I have determined what was causing the problem. My IDs are guids not integers.  I will have to update my data table to include identifiers that are integers (unless you already have a suggestion for dealing with guids).

 

Thanks,

Jennifer

[Svet]

Hi Jennifer,

Check the following example demonstrating a TreeView using the FlatDataBinding directive, where we use string GUIDs for the "id" and "parentId" properties of the objects, within the data array, passed to the [nodes] input property of the TreeView:
https://stackblitz.com/edit/angular-wdyac8?file=app/app.component.ts

I hope this helps.

Regards,
Svetlin
Progress Telerik

[Jennifer]

Thank you.  I was able to get it to work by returning the guids as strings.