Introduction:
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.
Description:
In previous articles I explained Angularjs open url in new browser window, Angularjs show hide div based on checkbox selection, Angularjs convert number to currency format, Angularjs get dropdownlist selected value, Angularjs convert text to uppercase while typing, Angularjs refresh div for every 1 second using interval mode and many articles relating to AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to show no records found message in ui grid in AngularJS with examples.
In previous articles I explained Angularjs open url in new browser window, Angularjs show hide div based on checkbox selection, Angularjs convert number to currency format, Angularjs get dropdownlist selected value, Angularjs convert text to uppercase while typing, Angularjs refresh div for every 1 second using interval mode and many articles relating to AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to show no records found message in ui grid in AngularJS with examples.
To show ui grid with no records found message we need
to write the code like as shown below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Angularjs Show No
Records Found in UI Grid</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link rel="stylesheet"
href="http://ui-grid.info/release/ui-grid-unstable.css"
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 = {
data:'sampledata',
columnDefs: [
{ field: 'name' },
{ field: 'gender',},
{ field: 'company' }
],
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
}
};
$scope.sampledata = {"data": []};
$scope.getData=function(){
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function (data) {
$scope.sampledata = data;
});
}
});
</script>
<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;
}
</style>
</head>
<body>
<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="sampledata.data.length==0">No
Records Found</div>
</div>
</div>
</form>
</body>
</html>
|
Demo
When
we run above code it will return output like as shown below
|
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
1 comments :
Thank you.
Note: Only a member of this blog may post a comment.