CODEWITHSUNDEEP
javascriptjqueryangularjsng-grid
parita porwal
parita porwal

Reputation: 672

Expand-Collaspe Using Angular ng-grid

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

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).

Upvotes: 0

Views: 81

Answers (1)

Maxim Shoustin
Maxim Shoustin

Reputation: 77904

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

Upvotes: 0

Related Questions