AngularJS ui-grid- To show 'No Data Available' when the response contains empty array

Question

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.

klode · Accepted Answer · 2016-01-27 14:08:07Z

36

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

edited Jan 27, 2016 at 14:08

answered Jan 24, 2015 at 14:14

klode

11.1k6 gold badges38 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Aditya Khajuria Over a year ago

Thanks a lot. You saved me a lot of time!! Updated the plunker with your solution.

UmaShankar Over a year ago

if I want to apply this watermark to the row data which is empty,how can i add this class at that row (box).

Just code Over a year ago

Man you are awesome

Sudarshan Kalebere Over a year ago

I used your solution, its good, but I have api calls which will take some time so this no data available will start showing while api is processing, any solution for this? to hide that msg initially?

klode Over a year ago

@Sudarshan you could define a variable on the controller scope api_done and ng-show="api_done && !gridOptions.data.length"

Collectives™ on Stack Overflow

AngularJS ui-grid- To show 'No Data Available' when the response contains empty array

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related