How to display default text and image instead of empty cell in Angular UI-Grid - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

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.

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

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.


What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon