How to display image in Angular UI-Grid

In this article I am going to explain how to display image in Angular UI-Grid in MVC application from database.

In the previous article how to add auto increment serial number in RDLC report, howto change/alter the text using CSS and how to create sub report using rdlcreport. 

Description:

 I want to show images from database in Angular UI-grid. We use the custom cell template to display the image.

{ field: 'ImagePath', cellTemplate: '<img width=\"145px\" src=\"{{grid.getCellValue(row, col)}}\">', enableFiltering: false, enableSorting: false }

If you want to show default image in case image not available., write the below given code:

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

Implementation:

I have created a table Employee and insert some dummy record into it.

Model

public partial class Employee

    {

        public int Id { get; set; }

        public string Name { get; set; }

        public Nullable<int> Phone { get; set; }

        public Nullable<int> Salary { get; set; }

        public string Department { get; set; }

        public string ImagePath { get; set; }

        public string EmailId { get; set; }

    }

Add controller

Add an empty controller to project. Create a Json action to get data from database.

  public class DemoController : Controller

    {

        //

        // GET: /Demo/

        DemoEntities1 db = new DemoEntities1();

        public ActionResult Index()

        {

            return View();

        }

public JsonResult GetEmployee()

        {

            var emp = db.Employees.ToList();

            return Json(emp, JsonRequestBehavior.AllowGet);

        }

}

Add View

Now add view for Index action. Add the UI Grid script to page.

Complete source of View (Index.cshtml):-

@{

    ViewBag.Title = "Angular UI Grid Tutorial";

}

<style>

    .grid{width:900px;height:480px;}

</style>

<h2>Angular UI Grid Tutorial</h2>

<div ng-app="mvcapp" ng-controller="DemoController">

    <div ui-grid="gridOptions" ui-grid-pagination class="grid"></div>

</div>

<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', 'ui.grid.pagination']);

    app.controller('DemoController', function ($scope, $http) {

        $scope.gridOptions = {

            paginationPageSizes: [5, 10, 15],

            paginationPageSize: 5,

            enableSorting: true,

            enableFiltering: true,

            enableColumnMenus: false,

            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>

Build the project and run the application.