How to Display data with Angular UI Grid in MVC application

In this article I am going to explain how to Display data with Angular UI grid in MVC application.

In the previous article I have explained how to get the number of days between twodates and convert days into month(s) and day(s), how to generate barcode inasp.net and  how to get date of birth(DOB) in years, months and days format in Sql server.

Description:

Here I am going to retrieve the data from database and display in Angular UI grid. You can download the UI Grid Jquery and CSS from HERE.

Implementation:

I have creates a Table Employee and inserted some dummy records into it. I am using database first approach.

Model :(Employee.cs)

    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

Now add a controller to project. Create Json method to get data.

Controller Code:

public class DemoController : Controller

    {

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 a view for Index action. Download the AngularJs and UI grid jquery Or you can use CDN. Here I am using CDN of both.

Complete Source code of View:

@{

    ViewBag.Title = "Angular UI Grid Tutorial";

}

<style>

    .grid{width:100%}

</style>

<h2>Angular UI Grid Tutorial</h2>

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

    <div id="grid1" ui-grid="gridOptions" 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']);

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

        $scope.gridOptions = {

            enableSorting: 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: '<img width=\"145px\" src=\"{{grid.getCellValue(row, col)}}\"><div ng-if="row.entity.ImagePath == null" style="color:red">Image not available</div>' }

              ] 

        };

        $http.get('/Demo/GetEmployee').success(function (data) {

            $scope.gridOptions.data = data;

        });

    });

</script>

Now build and run the application. Result is in front of you.