Tuesday, November 1, 2016

Show default text instead of empty cell in Angular UI-Grid

In this article I am going to explain how to show default text instead of empty cell in angular UI-grid.

Show default text instead of empty cell in Angular UI-Grid


Description:
I am using Angular UI-Grid to display data. I want to display default text if any field doesn’t have any data.

Implementation:
I have created table Employee and insert some dummy records. Some of employees email id is missing. Instead of empty space I want to show Email id not available. Use celltemplate as example given below:

{ field: 'EmailId', cellTemplate: '<div>{{row.entity.EmailId}}</div><div ng-if="row.entity.EmailId == null" style="color:red">Email id not available</div>' }

 Here is the complete code of View:

@{
    ViewBag.Title = "Angular UI Grid Tutorial";
}
<style>
    .grid{width:900px;height:480px;}
</style>
<h2>Angular UI Grid Tutorial</h2>
<form name="myform" method="post">
    <div ng-app="mvcapp" ng-controller="DemoController">
        <div ui-grid="gridOptions" ui-grid-pagination class="grid"></div>
        <input type="submit" value="Generate JSON" class="btn-primary" />
    </div>
</form>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">

<script>
    var app = angular.module('mvcapp', ['ngTouch', 'ui.grid']);
    app.controller('DemoController', function ($scope, $http) {
        $scope.gridOptions = {
            infiniteScrollRowsFromEnd: 40,
            infiniteScrollUp: true,
            infiniteScrollDown: true,
            rowHeight:100,
            columnDefs: [
              { field: 'Name' },
              { field: 'Phone' },
              { field: 'Salary', },
              { field: 'Department' },
              { field: 'EmailId', cellTemplate: '<div>{{row.entity.EmailId}}</div><div ng-if="row.entity.EmailId == null" style="color:red">Email id not available</div>' },
              { field: 'ImagePath', cellTemplate: '<div ng-if="row.entity.ImagePath == null" style="color:red">Image not available</div><img ng-if="row.entity.ImagePath != null" width=\"145px\" src=\"{{grid.getCellValue(row, col)}}\">', enableFiltering: false, enableSorting: false }
              ] 
        };
        $http.get('/Demo/GetEmployee').success(function (data) {
            $scope.gridOptions.data = data;
        });
    });
</script>

Now build and run the application.
  


1 comment: