How to display default text and image instead of empty cell in Angular UI-Grid

In this article I am going to explain how to display default text and image instead of empty cell in Angular UI-Grid.

In previous article I have explained how to count number of words in column usingsql server, how to display image in Angular UI-Grid and how to add autoincrement serial number in RDLC report.

Description:

I am using Angular UI-Grid to display data. I want to display default text and image 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. 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>' }

Cell template for default image:

{ field: 'ImagePath', cellTemplate: '<div ng-if="row.entity.ImagePath == null" style="color:red"><img src="images/image.jpg" width="120px"/></div><img ng-if="row.entity.ImagePath != null" width=\"145px\" src=\"{{grid.getCellValue(row, col)}}\">', enableFiltering: false, enableSorting: false }

OR

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

             

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>

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

//{ field: 'ImagePath', cellTemplate: '<div ng-if="row.entity.ImagePath == null" style="color:red"><img src="images/image.jpg" width="120px"/></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.