Good way to populate entire hierarchical datasource with one data call

14 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
    2515 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. 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
  4. 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
  5. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2515 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!
  6. 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.

  7. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2515 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!
  8. Andrey
    Andrey avatar
    2 posts
    Member since:
    Mar 2016

    Posted 31 Mar 2016 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!

  9. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2515 posts

    Posted 04 Apr 2016 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!
     
  10. Andrey
    Andrey avatar
    2 posts
    Member since:
    Mar 2016

    Posted 05 Apr 2016 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

  11. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2515 posts

    Posted 07 Apr 2016 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!
     
  12. Bajivali
    Bajivali avatar
    12 posts
    Member since:
    Oct 2015

    Posted 02 Nov in reply to Alex Gyoshev Link to this post

    Is the same example avaiable in MVC Dot net.

    My issue is i have the data being taken from single stored procedure and dispalyed using actionresult.

    currently i am using two calls for displaying hierarchical grids.

    i want to display both in a single call.

    below is the code for the hierarchical grid.

    can you take this as example and explain me how to display and fill data in a single call in hierarchical grid.

    <div>
    <div class="grid-scrollable">
    <div>
    @(Html.Kendo().Grid<ViewModels.Payment.PaymentMrrViewGridVM>()
    .Name("paymentViewProviderSdGrid" + Model.ServiceDetailId)
    .Events(e => e.DataBound("onProviderGridDataBound"))
    .Columns(columns =>
    {
    columns.Bound(p => p.ContractorId).Hidden(true);
    columns.Bound(p => p.ServiceDetailId).Hidden(true);
    columns.Bound(p => p.ServiceMonthYear).Hidden(true);
    columns.Bound(p => p.MrrId).Hidden(true);
    columns.Bound(p => p.IsEbsOnly).Hidden(true);
    columns.Bound(p => p.ServiceType).Hidden(true);
    columns.Bound(p => p.ProviderName);
    columns.Bound(p => p.ServiceMonth).Format("{0:MM/yyyy}");
    columns.Bound(p => p.Billed).Format("{0:c}");
    columns.Bound(p => p.Paid).Format("{0:c}");
    columns.Bound(p => p.Held).Format("{0:c}");

    })
    .Pageable(pageable => pageable.Refresh(true).PageSizes(true).ButtonCount(5))
    .Sortable()
    .Filterable(f => f.Operators(o => o.ForString(s => s.Clear()
    .Contains("Contains")
    .DoesNotContain("Does not contain")
    .IsEqualTo("Is equal to")
    .IsNotEqualTo("Is not equal to")
    .StartsWith("Starts with")
    .EndsWith("Ends with "))))
    .Selectable()
    .Resizable(resize => resize.Columns(true))
    .ClientDetailTemplateId("template")
    .DataSource(dataSource => dataSource.Ajax().ServerOperation(false).PageSize(10)
    .Read(read => read.Action("PaymentMrrViewServiceDetailGridProvider_Read", "PaymentProcessing", new { serviceDetailId = @Html.Raw(Json.Encode(Model.ServiceDetailId)), mrrId = @Html.Raw(Json.Encode(Model.MrrId)), poid = @Html.Raw(Json.Encode(Model.PoId)) }))
      .Model(model =>
      {
      model.Id(p => p.Id);
      })
    .Events(events => events.Error(@<text>function(args) {var gridName = 'paymentViewProviderSdGrid'+'@Model.ServiceDetailId';gridRowError(args, gridName);}</text>)))
    )

    </div>
    </div>
    </div>


    <script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<ViewModels.Payment.PaymentBUGridVM>()
    .Name("#=ServiceMonthYear##=ServiceDetailId#paymentViewProviderBUGrid#=ReimbursementId##=IsEbs#")
     .Events(e => e.DataBound("onBuGridDataBound"))
     .Columns(columns =>
     {
     columns.Bound(p => p.Id).Hidden(true);
     columns.Bound(p => p.IsEbs).Hidden(true);
     columns.Bound(p => p.ReimbursementId).Hidden(true);
     columns.Bound(p => p.BusinessUnit);
     columns.Bound(p => p.LongDescription);
     columns.Bound(p => p.FundType);
     columns.Bound(p => p.SpendPriority);
     columns.Bound(p => p.AmountPaid).Format("{0:c}");
     columns.Bound(p => p.ProcessAmountHeld).Format("{0:c}");
     columns.Bound(p => p.ManualAmountPaid).Width(220).Format("{0:c}").EditorTemplateName("Currency");

     columns.Command(command =>
     {
     command.Edit().HtmlAttributes(new { @class = "btn-primary k-grid-bu-edit" });
                  }).HtmlAttributes(new { @class = "columnnowrap" }).Width(200);
     })
     .Editable(editable => editable.Mode(Kendo.Mvc.UI.GridEditMode.InLine))
     .Pageable()
     .Filterable()
     .Resizable(resize => resize.Columns(true))

     .DataSource(dataSource => dataSource.Ajax().PageSize(10).Model(model => model.Id(p => p.Id))
     .Model(model => model.Field(p => p.BusinessUnit).Editable(false)).Model(model => model.Field(p => p.LongDescription).Editable(false)).Model(model => model.Field(p => p.FundType).Editable(false))
     .Model(model => model.Field(p => p.SpendPriority).Editable(false)).Model(model => model.Field(p => p.AmountPaid).Editable(false)).Model(model => model.Field(p => p.ProcessAmountHeld).Editable(false))
     .Model(model => model.Field(p => p.ServiceAvailableBalance).Editable(false))
     .Read(read => read.Action("PaymentViewProviderGridBU_Read", "PaymentProcessing", new { reimbursementId = "#=ReimbursementId#", isebs = "#=IsEbs#", poid = @Html.Raw(Json.Encode(Model.PoId)) }))

     .Update(update => update.Action("EditBusinessUnitGrid", "PaymentProcessing", new { mrrId = @Html.Raw(Json.Encode(Model.MrrId)), poid = @Html.Raw(Json.Encode(Model.PoId)) }))
     .Events(e => e.RequestEnd("RequestEnd"))
     .Events(events => events.Error(@<text>function(args) {var gridName = "#=ServiceMonthYear#"+"#=ServiceDetailId#"+'paymentViewProviderBUGrid'+"#=ReimbursementId#"+"#=IsEbs#";gridRowBuError(args, gridName);}</text>)))
     .Events(e => e.Cancel("onProviderBueGridCancel"))
     .ToClientTemplate())
    </script>

     

     

  13. Bajivali
    Bajivali avatar
    12 posts
    Member since:
    Oct 2015

    Posted 02 Nov in reply to Bajivali Link to this post

    just to clarify.

    first grid data is read from 

    .DataSource(dataSource => dataSource.Ajax().ServerOperation(false).PageSize(10)
    .Read(read => read.Action("PaymentMrrViewServiceDetailGridProvider_Read", "PaymentProcessing", new { serviceDetailId = @Html.Raw(Json.Encode(Model.ServiceDetailId)), mrrId = @Html.Raw(Json.Encode(Model.MrrId)), poid = @Html.Raw(Json.Encode(Model.PoId)) }))

    and second grid data is read from 
    DataSource(dataSource => dataSource.Ajax().ServerOperation(false).PageSize(10)
    .Read(read => read.Action("PaymentMrrViewServiceDetailGridProvider_Read", "PaymentProcessing", new { serviceDetailId = @Html.Raw(Json.Encode(Model.ServiceDetailId)), mrrId = @Html.Raw(Json.Encode(Model.MrrId)), poid = @Html.Raw(Json.Encode(Model.PoId)) }))

    want to read both using same method and at once to improve performance.

  14. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    318 posts

    Posted 06 Nov Link to this post

    Hi, Bajivali,


    This forum thread targets the Kendo UI Hierarchical Data Source.

    The described scenario is not directly related to this topic (the Kendo UI Grid binds to flat data). I suggest submitting a private thread or utilising the Kendo UI Grid forums instead if you have any questions about the grid.

    I will use the opportunity to suggest using either server detail templates or if you prefer to keep the Ajax bound master grid, then you would need to initialize the child grid in the detailInit event with Kendo UI for jQuery with JavaScript as shown here:

    https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/edit-master-row-data-in-detail-template

    If you have further questions, please use another forum thread or submit a private ticket. Thank you very much for your understanding.

    Kind Regards,
    Alex Hajigeorgieva
    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