How to get ng grid to hide specific rows

Question

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

I tried using rowTemplate and bind a ng-show data to isVisible . This hides the contents of the string, but leaves the actual string in place, showing an empty string.

I tried using filterOptions, but cannot determine the correct syntax for such filtering. I could not find good documentation on how to install it.

I even tried modifying the gridTemplate in the ng-grid source, trying to add a filter to ng-repeat=\"row in renderedRows\" , but I didn't get that either.

I suppose I can change the array itself by temporarily deleting the lines, but I would prefer not to do it this way, since I have to show the lines again (this is actually the extender that I do, which should hide / show the substrings)

Answer 1

Try also to conditionally set the line height in the template to "0" based on isVisible, or use a CSS class with an ng class. Play with CSS until you get the desired effect, and then you can use it in your template.

This is similar to the type of thing that will be useful when using height animations and CSS, so it opens and closes with an animated style. If you have a jsFiddle sample, I would be happy to try and help.

Edit: by looking at how the grid really exposes the rows (absolutely positioned), you have only two options that I can think of:

1) Filter the data that you bind to the grid using a function like dataVisible() , but save the complete list of data inside the controller so that you can easily show / hide

2) Send the patch to the ng-grid (or fork it) project with the filtering option you are looking for. It does not support this scenario.