4

Can we make a nested ng-grid. something like this, is it possible. here's plunker:

http://plnkr.co/edit/hYuFfxLR38LA0clIkF48?p=preview

I have also tried doing this using , templateUrl.

any suggestions, modifications to plunker or links ?

Moose
  • 751
  • 22
  • 42

1 Answers1

0

Yep, that might be working, although it doesn't make much sense.

First of all you have to supply some data to the parent grid so that at least one row is rendered.

Then you have to tell the parent grid to us another rowHeight than the default 30px.

Don't apply the grids class to the celltemplate.

    $scope.gridOptions = {
        data: 'facdata',
        rowHeight: '90',
        columnDefs: [{
          field: 'examname',
          displayName: 'Exam Name',
          cellTemplate: '<div  ng-grid="gridOptions1" ng-bind="row.getProperty(col.field)"></div>'
        }]
    };

Here is a Plunker

As you can see the there are two rows with a vaguely guessed height and two identical child grids with scrollbars.

What I don't understand is how you want to have different data for the childgrids.

Please explain more what exactly you want to achieve.

mainguy
  • 8,283
  • 2
  • 31
  • 40
  • I want a grid, which has subgrids. A button in first column of a grid, for each row. upon clicking on whic, it opens a subgrid. subgrid will fetch data from a different api. You have pointed me in the right direction, thanks. Now the issue at hand is a button upon clicking which subgrid will be displayed. here's a jquery equivalent I made . . http://jsfiddle.net/amorris/mz9ue/ – Moose Jun 03 '14 at 09:47
  • If you want a Master/Detail row solution I don't think that ng-grid is the best choice, since it renders divs that look like a table. Implementing variable row height would require a large amount of work. I guess you should try one of the other angular grid directives like ng-table, smart-table or TrNgGrid which are based on html tables and thus make it a whole lot easier to achieve a detail grid but have all the cool features like sorting, filtering and pagination, too. Look here: http://stackoverflow.com/questions/21375073/best-way-to-represent-a-grid-or-table-in-angularjs-with-bootstrap-3 – mainguy Jun 03 '14 at 10:43