How to hide ag-grid if rowData is null?

Question

I have a use case where the ag-grid (Angular Grid) I am using must not appear at all if the rowData is null that is returned from the Model code.

As of now I am unable to find a way to do it at the grid level.

What would be the right way to implement this? If hiding the div element is the way to do it, how does one doit in aright way from JavaScript?

Answer 1

If you want to hide the grid if no rows, then use an ng-if or an ng-show, pointing to the gridOptions.data.

<div ng-grid="gridOptions" ng-show="gridOptions.rowData.length>0"/>

or

<div ng-grid="gridOptions" ng-if="gridOptions.rowData.length>0"/>

If you use show, then the grid will stay there, but Angular will apply css to hide the element.

If you use if, then the grid directive will not be initialised by AngularJS until you have data present in rowData.