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

How to achieve N-level nested hierarchy in Kendo UI Grid in Angular

7 Answers 644 Views
Grid
This is a migrated thread and some comments may be shown as answers.
shmuel
Top achievements
Rank 1
shmuel asked on 23 Oct 2015, 09:37 AM

Hi ,

I have sales data with  hierarchy.

I need to show it in grouping for each level.

Can i implement  N-level nested hierarchy in Kendo UI Grid (Angular ) with grouping for each level.  

 

Thanks

Shmuel

 

7 Answers, 1 is accepted

Sort by
0
Nikolay Rusev
Telerik team
answered on 27 Oct 2015, 07:15 AM

Hello Shmuel,

 

You can nest detail templates as many as you need. Here i example for 3 level hierarchy - http://dojo.telerik.com/@rusev/UtAMo

 

Regards,
Nikolay Rusev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Shoeb
Top achievements
Rank 1
answered on 23 Mar 2016, 09:46 PM

can you provide the same code in MVC format rather that angular?

 

Thanks,

Shoeb.

0
Nikolay Rusev
Telerik team
answered on 25 Mar 2016, 08:08 AM

Hello Shoeb,

 

Here is a demo and a step-by-step tutorial how to implement hierarchy in MVC. Following it you could implement any level of hierarchy you need.

 

Regards,
Nikolay Rusev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Jerry
Top achievements
Rank 1
answered on 20 Oct 2016, 08:36 PM

Hi,

How you can inherit from the third level of the second? not dataitem , according example

<div id="example" ng-app="KendoDemos">
      <div ng-controller="MyCtrl">
        <kendo-grid options="mainGridOptions">
          <div k-detail-template>               
            <kendo-grid k-options="detailGridOptions(dataItem)">
              <div k-detail-template>               
                <kendo-grid k-options="detailGridOptions(?)">

                </kendo-grid>
              </div>  
            </kendo-grid>
          </div>
        </kendo-grid>


      </div>

0
Nikolay Rusev
Telerik team
answered on 21 Oct 2016, 07:45 AM

Hello Jerry,

I'm not sure I understand. Here is how you can make three level hierarchy in AngularJS environment.

http://dojo.telerik.com/@rusev/OfokA

Regards,
Nikolay Rusev
Telerik by Progress
 
Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
 
0
Jerry
Top achievements
Rank 1
answered on 21 Oct 2016, 05:12 PM

Hello,

 

 

 

 

The third level of detail inheritance. attached file

thanks.

 

<div ng-app="myapp">
    <div ng-controller="MyCtrl">
        <kendo-grid options="mainGridOptions">
            <div k-detail-template>
                <kendo-grid k-options="detailGridOptions(dataItem)">
                    <div k-detail-template>
                        <kendo-tabstrip>
                            <ul>
                                <li class="k-state-active">sub detailGridOptions 1</li>
                                <li>sub detailGridOptions 2</li>
                            </ul>

                            <div>
                                <div kendo-grid k-options="subdetailGridOptions1"></div>
                            </div>
                            <div>
                                <div kendo-grid k-options="subdetailGridOptions2"></div>
                            </div>


                        </kendo-tabstrip>
                    </div>
                </kendo-grid>
            </div>
        </kendo-grid>
    </div>
</div>

the third level of detail inheritance
the third level of detail inheritance
the third level of detail inheritance
0
Nikolay Rusev
Telerik team
answered on 24 Oct 2016, 10:32 AM

Hello Jerry,

 

I see what you mean and that is expected. Each detail template is evaluated only against the parent item.

 

However you can walk up the angular scope tree and get the root level data item. See the updated example bellow. It seems to be what you need.

 

http://dojo.telerik.com/@rusev/OfokA/2

 

Regards,
Nikolay Rusev
Telerik by Progress
 
Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
 
Tags
Grid
Asked by
shmuel
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Shoeb
Top achievements
Rank 1
Jerry
Top achievements
Rank 1
Share this question
or