Angular ui.grid get nested rows

Question

I've tried for the last few hours to get ui.grid to display a nested table inside one row.

$scope.gridOptions.columnDefs = [
    {name: 'id'},
    {name: 'categoryName'},
    {name: 'products', cellTemplate: '<div ui-grid="grid.appScope.gridOptions.data"></div>'}
  ];

Each row can have none, one or multiple products, but I can't get my products to display.

I'm requesting the json file via ajax, but for demo purposes I've made it static. Here's the plucker http://plnkr.co/edit/aXgXFZQL4xgVtTNH3y2S?p=preview

Thanks in Advance

Answer 1

This here fork of your plunker seems to work out: http://plnkr.co/edit/keLHObnxpaFfasyCQRNH?p=preview

One change needed turned out to be fetching the proper data, not from the grid.appscope but from the row entity:

{name: 'products', cellTemplate: '<div ui-grid="row.entity[\'products\']"></div>'}

And then some stuff to get the display right, most notably setting up the nested grid data as an actual gridOptions object. I tried messing around with that a bit to get it to accept an array or other plain object, but it really doesn't seem to like that.

Answer 2

Is it worth considering the expandable module for this instead: http://ui-grid.info/docs/#/tutorial/306_expandable_grid

The approach you're currently taking will likely give difficulty with row height if the number of products is variable, whereas expandable would allow variable numbers of rows. Depending on your taste, the ability to expand and collapse may be beneficial, and it gives room to put more information about each product.