AngularJS ui-grid- Per mostrare 'Nessun dato disponibile' quando la risposta contiene array vuoto

Question

Voglio mostrare 'Nessun dato disponibile' in ui-Grid 3.0, se la risposta dell'ajax contiene una matrice di dati json vuota, ad es. ;

data = {"data": []}; 

E ora se faccio -

$scope.gridOptions.data = data.data; 

'No Data Available' deve venire in ui-Grid.

Che cosa sta accadendo attualmente è che l'utente ottiene uno schermo vuoto se i dati sono vuoti.

Anche come renderlo come una funzionalità predefinita?

Vedere plunker qui.

Answer 1

È possibile utilizzare un "watermark" (plunker) (updated plunker)

modello

<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:

per fare la .watermark indipendente dalla dimensione di appartenenza specifico:

.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; 
}