Good way to populate entire hierarchical datasource with one data call

11 posts, 0 answers
  1. Joe Page
    Joe Page avatar
    6 posts
    Member since:
    Feb 2004

    Posted 08 Nov 2013 Link to this post

    Starting with the idea that there was a data query that returned multiple levels of a hierarchy in one query, what is the best way to populate a hierarchical data source with it?

    For instance, take a table that has Continent, Country, Region, City as four separate columns.
    How could we avoid the inefficiency of populating the hierarchy with a few thousand queries and subqueries, and instead parse the single recordset and populate the hierarchy.

    Example Data:
    North America, United States, Virginia, Richmond
    North America, United States, Virginia, Charlottesville
    North America, United States, Alaska, Anchorage
    North America, Canada, Ontario, Windsor
    Europe, England, Essex, Rochford

    Example Hierarchy:
    --- North America
    --- North America --- Canada
    --- North America --- Canada --- Ontario
    --- North America --- Canada --- Ontario --- Windsor
    --- North America --- United States
    --- North America --- United States --- Alaska
    --- North America --- United States --- Alaska --- Anchorage
    --- North America --- United States --- Virginia
    --- North America --- United States --- Virginia --- Richmond
    --- North America --- United States --- Virginia --- Charlottesville
    --- Europe 
    --- Europe --- England
    --- Europe --- England --- Essex
    --- Europe --- England --- Essex --- Rochford

  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 11 Nov 2013 Link to this post

    Hello Joe,

    Use jQuery to fetch the data and then create the datasource:

    $.get("/foo", function(data) {
        var ds = new kendo.data.HierarchicalDataSource({
            data: data,
            schema: { /*...*/ }
        });
    });

    Regards,
    Alex Gyoshev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Joe Page
    Joe Page avatar
    6 posts
    Member since:
    Feb 2004

    Posted 11 Nov 2013 Link to this post

    I think I understand the idea behind this, but it would be very helpful if you could flush out a little bit more in your example.

    For instance, let's say the columns in our recordset are ParentKey, ChildKey, and Label.
    How would we set up the schema, and then how would we map a treeview to this data?

    Thank you,
    Joe
  5. Joe Page
    Joe Page avatar
    6 posts
    Member since:
    Feb 2004

    Posted 11 Nov 2013 Link to this post

    Also, how would the recordset need to be organized?

    Would we have one large set of rows with ParentKey, ChildKey, Label, and then the Hierarchical Data Source simply figures out that since United States is a parent to Virginia, that then United States must be a grandparent to Charlottesville, since Charlottesville has Virginia as a parent?
    Or, do we need some other kind of ordering, batches, subqueries, ... to first build the top generation, and then build all of the children for the next generation, and then build all the children for the generation after that, etc... ?

    Basically, we could really use a simple example that takes us from database to datasource to treeview, if that is not too much trouble.

    Thank you again,
    Joe
  6. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 12 Nov 2013 Link to this post

    Hello Joe,

    What server-side technology are you using? The Kendo UI wrappers for PHP, ASP.NET MVC and JSP contain full examples of how to bring the data from the database to the treeview per level. Since you need the complete database serialized, you will need to build the complete hierarchy on the server. See the HierarchicalDataSource documentation for what format is expected on the client.

    Regards,
    Alex Gyoshev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Joe Page
    Joe Page avatar
    6 posts
    Member since:
    Feb 2004

    Posted 12 Nov 2013 Link to this post

    We are using MVC, but my question doesn't have much to do with that.
    We have spent hours pouring over many examples and documentation, including that which you sent a link to.
    Nothing anywhere in any of what we have found lays out what we believe to be a relatively basic task for using any treeview.
    That is, how to query a database one time, and populate the entire treeview.

    We figured out how to do it, but we won't post it here since it involves using another treeview instead of Kendo.

    We are still looking to utilize the Kendo library.  My client and I still like many of your other components.
    Hopefully we won't find it so difficult to implement other functionality after we switch to a premium support license.

  8. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 14 Nov 2013 Link to this post

    Hello Joe,

    Indeed, there is no example for that specific scenario, and we will look into that. However, please note that serializing JSON data from the server is not a specific Kendo UI concern, and implementing a sample project for a given database schema is out of scope for the standard support package. As noted in the article on how to get the most out of support, supplying a sample project with some data and a description what you tried and didn't work will most certainly yield a faster and precise answer, which will work for your specific case (because we will have enough information for the scenario).

    Regards,
    Alex Gyoshev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Andrey
    Andrey avatar
    2 posts
    Member since:
    Mar 2016

    Posted 31 Mar Link to this post

    I am having the exact same problem.

    here is my script:

    var dataSource = new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
              url: "http://localhost:8080/getDoc?id=1",
              dataType: "json"
            }
        }

    });

    dataSource.fetch(function() { console.log('this never works') });

    This is my json reply from the server:

    {"partnumber":null,"version":null,"date":null,"description":null,"documentOccurrence":[],"relatedDocs":[],"marked":false,"doctype":null,"errors":0,"warnings":0,"id":null,"hjid":null,"optionGroupList":[{"hjid":0,"name":"GroupB","options":[{"hjid":0,"name":"OptC"}]},{"hjid":0,"name":"GroupA","options":[{"hjid":0,"name":"OptA"},{"hjid":0,"name":"OptB"}]}],"unassignedOptions":[{"hjid":0,"name":"OptD"}]}

     

    What is missing here? and why is the callback function from fetch never triggered?

     

    Thanks in advance!

  10. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 04 Apr Link to this post

    Hello Andrey,

    The schema should be configured. See this Dojo snippet.

    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  11. Andrey
    Andrey avatar
    2 posts
    Member since:
    Mar 2016

    Posted 05 Apr in reply to Alex Gyoshev Link to this post

    Hello Alex,

    first of all, thank you for preparing the snippet!

     

    One question that has been bothering me for the past days:

    in the schema is it possible to define more than 1 child type? As you can see my schema has 2 different lists subgroups.

    Should I create multiple HierarchicalDataSource for each sub-list? In some cases this will work for me, in other cases I just want a "folder" in my tree to show the sub-components of each list.

    and if I do make the approach of creating multiple HierarchicalDataSource, can they all be somehow compiled to the same JSON and sent back to the server?

    I am starting to think that my requirements are a little bit to custom for the usage that this was meant for.

     

    Kind regards,

    Andrey

  12. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 07 Apr Link to this post

    Hello Andrey,

    The HierarchicalDataSource is good for two scenarios: self-referencing data, and strict per-level types (Category > Product > Order). If you want to nest the document containers, e.g. Container > Container > Object, and want to use the HierarchicalDataSource, you will have to convert the containers and objects to a common data type that will be transmitted to the server, emulating self-referencing data.

    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready