Wednesday, October 19, 2016

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.
How to display image in Angular UI-Grid


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.


No comments:

Post a Comment