How to implement Angular Js UI-Grid in MVC ?

UI-Grid is one of the most popular and stable open source angularJs Grid. It is completely written using angular js. It is very fast. It contains almost all the features which contains the commercial third party grid controls.

For more details, please go to this official site

To implement in MVC, we can do like this

Step 1: Create the MVC application.

Step 2: Create the tblEmp with (Id,EmpName,EmpAddress,EmailId) field in database and keep some data for demo.

Step 3: Create the Emp Model class like this in Model folder

namespace UI_Grid_Sample.Models
    public class Emps
        public int Id { get; set; }
        public string EmpName { get; set; }
        public string EmpAddress { get; set; }
        public string EmailId { get; set; }
        public string Operation { get; set; }

Step 4: Create the Emp Controller using Web API and Write the code to Fetch data from tblEmp like this

using System;
using System.Collections.Generic;
using System.Web.Http;
using System.Data.SqlClient;
using UI_Grid_Sample.Models;

namespace UI_Grid_Sample.Services
    public class EmpController : ApiController
        const string sConnString = "Data Source=(LocalDB)\\v11.0;AttachDbFilename=|DataDirectory|\\Database1.mdf;Integrated Security=True";

        List<Emps> MyEmps = new List<Emps>();

        public IEnumerable<Emps> FetchBookList(Emps objList)
            using (SqlConnection con = new SqlConnection(sConnString))
                SqlCommand objComm = new SqlCommand("SELECT Id,EmpName,EmpAddress,EmailId FROM tblEmp", con);

                SqlDataReader reader = objComm.ExecuteReader();

                while (reader.Read())
                    MyEmps.Add(new Emps
                        Id = Convert.ToInt32(reader["Id"]),
                        EmpName = reader["EmpName"].ToString(),
                        EmpAddress = reader["EmpAddress"].ToString(),
                        EmailId =  reader["EmailId"].ToString()

            return MyEmps;


Step 5: Create One controller in MVC i.e. Emp

using System.Web.Mvc;

namespace UI_Grid_Sample.Controllers
    public class EmpController : Controller
        // GET: /Emp/

        public ActionResult Index()
            return View();


Step 5: Create a view and add the reference for angularjs, UIGrid, UIGrid Css and write the code for consuming consuming Web API method in AngularJs as given below

    ViewBag.Title = "Index";
<script src=""></script>
 <script src=""></script>
 <link rel="stylesheet" href="" type="text/css">

        p, div {
            font:15px Verdana;
        .uiGrd {
            width: 580px;
            height: 200px;

<script type="text/javascript">
    var myApp = angular.module('myApp', ['ui.grid']);
        function ($scope, $http) {


            function FetchEmpList(ops) {
                var request = {
                    method: 'post',
                    url: '/api/emp/',
                    data: {
                        Operation: ops
                    dataType: 'json',
                    contentType: "application/json"

                $scope.arrEmps = new Array;

                // POST DATA WITH $http.
                    .success(function (data) {
                        var i = 0;      // JUST A COUNTER.

                        // LOOP THROUGH EACH DATA.
                        angular.forEach(data, function () {
                            var b = {
                                EmpId: data[i].Id,
                                EmpName: data[i].EmpName,
                                EmpAddress: data[i].EmpAddress,
                                EmailId: data[i].EmailId

                            i += 1;

                    .error(function () {


                $scope.gridData = { data: 'arrEmps' };


<h2>Sample code for AngularJs GridUI </h2>

<div ng-app="myApp"  ng-controller="myController">
        <div class="uiGrd" id="grd" ui-grid="gridData"></div>


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.