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

[shmuel]

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

 

[Nikolay Rusev]

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

 

 

[Shoeb]

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

 

Thanks,

Shoeb.

[Nikolay Rusev]

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

 

 

[Jerry]

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>

[Nikolay Rusev]

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

 

 

[Jerry]

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

[Nikolay Rusev]

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