5

I have an array of objects that I want to show in ng-grid. Each row has a boolean property isVisible. In the ng-grid I want to show only the rows where isVisible is true. The other rows should be completely hidden.

I have tried using a rowTemplate and databinding a ng-show to isVisible. That hides the content of the row, but leaves the actual row in place, showing an empty row.

I have tried using filterOptions, but can't figure out the correct syntax to do such a filtering. I couldn't find any good documentation on how to set it.

I have even tried modifying the gridTemplate in the ng-grid source, by trying to add a filter on ng-repeat=\"row in renderedRows\", but I haven't gotten that to work either.

I guess I could modify the array itself, by temporarily removing rows, but I would prefer not to do it that way, since I have to be able to show the rows again (It is actually an expander that I'm doing, that should hide/show sub-rows)

Klas Mellbourn
  • 42,571
  • 24
  • 140
  • 158
  • Have you looked at SO 16546678 (http://stackoverflow.com/questions/16846678/nggrid-multi-column-filtering)? It's not really hiding but filtering out rows by re-creating the gridOptions.data object. There's a plunker too: http://plnkr.co/edit/2RXlNq?p=preview – AardVark71 Aug 27 '13 at 07:34
  • 1
    @AardVark71 I would like to avoid having multiple copies of the data object. For one thing http://stackoverflow.com/questions/17847119/how-to-hide-rows-in-ng-grid implies that there memory leaks with that solution. – Klas Mellbourn Aug 27 '13 at 07:59
  • 1
    You don't need another copy of the data, just a separate array. Again you can also bind to a function that filters the data so instead of $scope.data, you bind to $scope.filteredData(). It will be called whenever Angular runs a digest. – Chris Nicola Aug 30 '13 at 19:06

1 Answers1

1

Try also conditionally setting the height of the row in the template to '0' based on isVisible or use a CSS class with ng-class. Play with the CSS of it until you get the desired effect and then you can use that in your template.

This sounds like the type of thing that would benefit from using height and CSS animations actually so it opens and closes with an animated style. If you have a jsFiddle sample I'd be happy to try and help.

Edit: After looking at how the grid actually lays out it's rows (absolutely positioned) you only really have two options I can think of:

1) Filter the data you are binding to the grid through a function like dataVisible() but keep the full data list internally in the controller so you can show/hide easily

2) Submit a patch to the ng-grid project (or fork it) with the filtering capability you are looking for. Out of the box it doesn't appear to support this scenario.

Chris Nicola
  • 14,384
  • 6
  • 47
  • 61
  • Setting height to '0' didn't do anything. I set it on all elements of rowTemplate, but the row still shows up. Setting ng-hide='true' on all elements of rowTemplate hides the content of the row, but the empty row is still shown. – Klas Mellbourn Aug 27 '13 at 05:49
  • Yeah I'm looking at the ng-grid and it appears to absolutely position each of the columns, so the following columns have a "top" property so they don't just stack. Your only option is to filter the items out of the data list. You should create perhaps a "dataVisible" list or even a function "dataVisible()" that filters for you, but keep the full list internally so you can show/hide them easily. – Chris Nicola Aug 27 '13 at 14:52