Expand-Collaspe Using Angular ng-grid

Question

Hello I am trying to create a grid which expand/collaspe row when click on the column data. My grid is look like

• First show only first column data and all other column data is blank but their header are show.
• Next when click on '+' icon of first column then in next row it is expand and second column data is show and all remaing are blank.
• Next when click on '+' icon of second column then it is expand and third column data is show and all remaing are blank.
• So on...

For this I try to create First level and my sample is - http://plnkr.co/edit/p7NHNCRiewHAvEEuByyK?p=preview

My sample code is -

$scope.myData = [{icon:"",Domain: "Moroni", project:"" },
{icon:"",Domain: "Tiancum", project:"" },
{icon:"",Domain: "Jacob", project:"" },
{icon:"",Domain: "Nephi", project:"" },
{icon:"",Domain: "Enos", project: ""}];
$scope.gridOptions = {
    data: 'myData',
    columnDefs: [{
        field: 'icon',
        displayName: '',
        cellTemplate: '<div><i class="fa fa-plus-square" aria-hidden="true" ng-click="foo(row.entity.Domain)" ng-bind="row.getProperty(col.field)">></i></div>'
      },{
        field: 'Domain',
        displayName: 'Domain',
        cellTemplate: '<div  ng-click="foo(row.getProperty(col.field))" ng-bind="row.getProperty(col.field)"></div>'
      }, {
        field: 'project',
        displayName: 'project'
      }

    ]
  };

Please suggest how I create expand/collaspe functionlity and I want to use only Angular-Grid(ng-grid).

Answer 1

I believe you want UI-grid TreeView

Add 'ui.grid.treeView' to angular module.

Your grid template:

 <div id="grid1" ui-grid="gridOptions" ui-grid-tree-view class="grid"></div>

Demo Plunker