How to Display data with Angular UI Grid in MVC application | ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF snippets and tutorial

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=""></script>
<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<link rel="stylesheet" href="" 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) {
            $ = data;

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

Post a Comment



Contact Form


Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget