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

Fasermaler · Accepted Answer · 2015-03-11 20:11:22Z

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.

answered Mar 11, 2015 at 20:11

Fasermaler

9436 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

PaulL · Accepted Answer · 2015-03-15 23:21:40Z

1

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.

answered Mar 15, 2015 at 23:21

PaulL

6,6503 gold badges37 silver badges39 bronze badges

Collectives™ on Stack Overflow

Angular ui.grid get nested rows

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related