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

Good way to populate entire hierarchical datasource with one data call

13 Answers 1212 Views
Hierarchical Data Source
This is a migrated thread and some comments may be shown as answers.
Joe Page
Top achievements
Rank 1
Joe Page asked on 08 Nov 2013, 02:51 PM
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

13 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 11 Nov 2013, 08:17 AM
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!
0
Joe Page
Top achievements
Rank 1
answered on 11 Nov 2013, 04:37 PM
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
0
Joe Page
Top achievements
Rank 1
answered on 11 Nov 2013, 10:43 PM
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
0
Alex Gyoshev
Telerik team
answered on 12 Nov 2013, 08:19 AM
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!
0
Joe Page
Top achievements
Rank 1
answered on 12 Nov 2013, 04:13 PM
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.

0
Alex Gyoshev
Telerik team
answered on 14 Nov 2013, 09:51 AM
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!
0
Andrey
Top achievements
Rank 1
answered on 31 Mar 2016, 11:33 AM

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!

0
Alex Gyoshev
Telerik team
answered on 04 Apr 2016, 06:46 AM

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!
 
0
Andrey
Top achievements
Rank 1
answered on 05 Apr 2016, 09:53 AM

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

0
Alex Gyoshev
Telerik team
answered on 07 Apr 2016, 07:11 AM

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!
 
0
Bajivali
Top achievements
Rank 1
answered on 02 Nov 2017, 08:21 PM

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>

 

 

0
Bajivali
Top achievements
Rank 1
answered on 02 Nov 2017, 08:25 PM

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.

0
Alex Hajigeorgieva
Telerik team
answered on 06 Nov 2017, 01:27 PM
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.
Tags
Hierarchical Data Source
Asked by
Joe Page
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Joe Page
Top achievements
Rank 1
Andrey
Top achievements
Rank 1
Bajivali
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or