Tuesday, September 20, 2016

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.

How to Display data with Angular UI Grid in MVC application

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.

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";
<h2>Angular UI Grid Tutorial</h2>

<div ng-app="mvcapp" ng-controller="DemoController">
    <div id="grid1" ui-grid="gridOptions" class="grid"></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">

    var app = angular.module('mvcapp', ['ngTouch', 'ui.grid']);
    app.controller('DemoController', function ($scope, $http) {
        $scope.gridOptions = {
            enableSorting: true,
            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;

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

No comments:

Post a Comment