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

8 posts, 0 answers
  1. shmuel
    shmuel avatar
    1 posts
    Member since:
    Oct 2015

    Posted 23 Oct 2015 Link to this post

    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

     

  2. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 27 Oct 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Shoeb
    Shoeb   avatar
    7 posts
    Member since:
    Feb 2015

    Posted 23 Mar Link to this post

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

     

    Thanks,

    Shoeb.

  5. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 25 Mar Link to this post

    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!
     
  6. Jerry
    Jerry avatar
    3 posts
    Member since:
    Aug 2015

    Posted 20 Oct in reply to Nikolay Rusev Link to this post

    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>

  7. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 21 Oct Link to this post

    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.
     
  8. Jerry
    Jerry avatar
    3 posts
    Member since:
    Aug 2015

    Posted 21 Oct in reply to Nikolay Rusev Link to this post

    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
  9. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 24 Oct Link to this post

    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.
     
Back to Top
Kendo UI is VS 2017 Ready