aspdotnet-suresh offers articles and tutorials,csharp dot net, articles and tutorials,VB.NET Articles,Gridview articles,code examples of 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Angularjs UI Grid Show No Records Found or No Data Available Message

Jun 17, 2015

Here I will explain how to show no records found message in ui grid in
AngularJS with example or AngularJS show no data found message in ui grid in case if service not returned any data. By comparing data value in AngularJS we can show no data available message in ui grid whenever it is empty or not contain data.

To show ui grid with no records found message we need to write the code like as shown below

<html xmlns="">
<title>Angularjs Show No Records Found in UI Grid</title>
<script src=""></script>
<script src=""></script>
<link rel="stylesheet" href="" type="text/css">
<script type="text/javascript">
var myApp = angular.module('sampleapp', ['ui.grid', 'ui.grid.selection', 'ui.grid.exporter']);
myApp.controller("appcontroller", function ($scope, $http) {
$scope.gridOptions = {
columnDefs: [
{ field: 'name' },
{ field: 'gender',},
{ field: 'company' }
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
$scope.sampledata =  {"data": []};
.success(function (data) {
$scope.sampledata = data;
<style type="text/css">
.grid {
width: 500px;
height: 400px;
.nodatatxt {
position: absolute;
top : 80px;
opacity: 0.25;
font-size: 1.5em;
width: 100%;
text-align: center;
z-index: 1000;
<form id="form1">
<div ng-app="sampleapp" ng-controller="appcontroller">
<input type="button" id="btnGet" value="Get Data" ng-click="getData()" /><br /><br />
<div ui-grid="gridOptions" ui-grid-selection ui-grid-exporter class="grid">
<div class="nodatatxt" ng-if="">No Records Found</div>


When we run above code it will return output like as shown below

Angularjs UI Grid Show No Records Found or No Data Available Message

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest,, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email


Give your Valuable Comments

Other Related Posts

© 2015 All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.