Kendo UI hierarchical grid where parents and children share same columns

0
votes

We're working on the report-chooser page of a web app. Some reports only require a single click to run. Other reports have variations (e.g. Sales by Customer, Sales by Salesperson, Sales by Product, etc.) so the user needs to click twice: once to pick the report "group", and secondarily to run one particular variation.

Here's a mockup of what we're trying to achieve:

enter image description here

The real implementation will have more columns, I'm just showing two columns here to illustrate the nesting UI we have in mind.

We're using Kendo UI grid, which has native grouping and hierarchy features, but neither seem to be exactly what we're looking for, because both features seem to be optimized for a master/detail kind of nesting, where:

  1. Parents and children have different columns, but in our case we want columns to be similar for all rows, even expandable ones.
  2. Parents and children can't be peers in the same list, but in our case we want to blur the distinction between 1-variation and multiple-variation reports.

Any suggestions for how to achieve what we're looking for on top of Kendo UI Grid?

2
asp.net-mvckendo-uikendo-grid
Did you look at the TreeList widget: demos.telerik.com/kendo-ui/treelist/index – ezanker
Yep. No columns support in that tree widget. The grid is much closer to what we're looking for. – Justin Grant
There is a TreeView and a TreeList. The treeList absolutely has columns. Look at the demo I linked... – ezanker
@ezanker - haha, you're right. I hadn't seen the treelist. Looks like a good solution to our problem. Make your comment an answer! – Justin Grant

2 Answers

3
votes

The Kendo UI TreeList (not TreeView) represents a hierarchical list of rows with the same columns.

You can see a demo of it here: http://demos.telerik.com/kendo-ui/treelist/index

0
votes

One thing to keep in mind if you're going to use kendoTreeList, and if your data is coming from an ajax call. you'll need to do is use $.ajax outside of the kendoTreeList, also you'll need a global variable to store the new json that will be passed to the dataSource and execute a read to update the treeList.

$.ajax(url:myUrl, success:function(data){
//flatten the returned json if it's hierarchical
//loop and flatten data
myJson = flatJson;
ds = new kendo.hierarchicalDataSource({data:myJson});
ds.read(); //triggers the update of the dataSource
}