How to Display data with Angular UI Grid in MVC application - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework 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


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.

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+
loading...


EmoticonEmoticon