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

5 posts, 1 answers
  1. Ian
    Ian avatar
    12 posts
    Member since:
    Sep 2017

    Posted 03 Nov 2017 Link to this post

    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?
  2. Ian
    Ian avatar
    12 posts
    Member since:
    Sep 2017

    Posted 03 Nov 2017 in reply to Ian Link to this post

    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.

  3. Ian
    Ian avatar
    12 posts
    Member since:
    Sep 2017

    Posted 03 Nov 2017 in reply to Ian Link to this post

    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.
  4. Ian
    Ian avatar
    12 posts
    Member since:
    Sep 2017

    Posted 04 Nov 2017 Link to this post

    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
  5. Answer
    Plamen
    Admin
    Plamen avatar
    2824 posts

    Posted 07 Nov 2017 Link to this post

    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.
Back to Top