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

Invalid Template trying to bind templates for each nested level of a HierarchicalDataSource

4 Answers 164 Views
Hierarchical Data Source
This is a migrated thread and some comments may be shown as answers.
Ian
Top achievements
Rank 1
Ian asked on 04 Nov 2017, 01:45 AM

I'm trying to create an editor for a HierarchicalDataSource (remotely loaded as JSON). 

I'm using `kendo.bind($('#target'),kendo.observable({data: new kendo.data.HierarchicalDataSource(<..config...>)});` to bind a hierarchical datasource with 3 levels of depth (customer -> location -> stores) [as an example]. For each level, I have a separate template for each type of child. I have a dojo demonstrating a static version.

I have several issues:

  1. Using a HierarchicalDataSource means that even if all the data is loaded at once, the tree doesn't fully populate.
  2. Declaring custom fields for child nodes doesn't auto-populate populated child nodes 
  3. In the static `data: [...]` version, it is possible to load child collections by calling `datasource.data().at(i).load()`, but it must be called twice to display the template for the children 
  4. In the remote-datasource version, load() doesn't load the data in the custom child collection ("locations"), though it does populate the dataitem.children collection. 
  5. Binding the template to `data-bind="source: children"` results in an Invalid Template error in the static version
  6. Binding the same template from #5 to `data-bind="source: locations"` works, but error #3 occurs, and load() doesn't work when first called. 
In short: given a heterogenous hierarchical dataset, how do I display nested editors for each node and its (different to itself) children?

4 Answers, 1 is accepted

Sort by
0
Ian
Top achievements
Rank 1
answered on 04 Nov 2017, 02:15 AM

Here's one with options to load one, load first level, load deep

Again, with a remote source, the issue is that calling load() on a data-node NEVER loads the children in the custom-property, even though the "children" collection on the data-node is populated.

0
Ian
Top achievements
Rank 1
answered on 04 Nov 2017, 02:31 AM
I have found a bug in the remote source. 

Requests to a node's children must return an object with the node's children-property as the label for the array, so 

`{"city":"Praha","streets":[]}` requires that loading its children take the form `{"streets": [{},{}]}` instead of a bare array. 

However, the double-call to load() is still an issue.
0
Ian
Top achievements
Rank 1
answered on 04 Nov 2017, 04:48 PM
I have worked around the issue (load() must be called twice) by calling

    item.load().then(function() {if (item.children||false) {item.children.trigger("change")}})

when expanding the view. 

This is based on this thread about angular: https://www.telerik.com/forums/k-ng-model-is-not-updated-on-first-data-load
0
Accepted
Plamen
Telerik team
answered on 07 Nov 2017, 12:13 PM
Hi,

Thank you for sharing what worked correctly for your case. If you still have questions left please elaborate them so we could be more helpful.

Regards,
Plamen
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Hierarchical Data Source
Asked by
Ian
Top achievements
Rank 1
Answers by
Ian
Top achievements
Rank 1
Plamen
Telerik team
Share this question
or