I want to show 'No Data Available' in ui-Grid 3.0, if the response from the ajax contains empty json data array i.e.;
data = {"data": []};
And now if i do -
$scope.gridOptions.data = data.data;
'No Data Available' must come in ui-Grid.
What is currently happening is that user gets a blank screen if data is empty.
Also how to make it as a default functionality ?
See the plunker here.
You could use a "watermark" (plunker) (updated plunker)
template
<div ui-grid="gridOptions" ui-grid-selection ui-grid-exporter class="grid">
<div class="watermark" ng-show="!gridOptions.data.length">No data available</div>
</div>
CSS
.watermark {
position: absolute;
top : 80px;
opacity: 0.25;
font-size: 3em;
width: 100%;
text-align: center;
z-index: 1000;
}
Edit:
to make the .watermark independent from the specific parent size:
.watermark {
position: absolute;
top: 50%; <---- Center vertically in the parent element,
transform: translateY(-50%); <---- it works for any parent height
opacity: 0.25;
font-size: 3em;
width: 100%;
text-align: center;
z-index: 1000;
}