Thursday, September 22, 2016

How to implement pagination and sorting with Angular UI Grid in MVC application

In this article I m going to explain how to implement pagination and sorting with Angular UI Grid in MVC application.

How to implement pagination and sorting with Angular UI Grid in MVC application

In last article of UI grid I have explained how to display records. Now I want to sort the data ascending and descending order and implement pagination. For pagination you have to set page size and enable the sorting as
            paginationPageSizes: [5, 10, 15],
            paginationPageSize: 5,
            enableSorting: true, 

I have created a table Employee and insert some dummy record into it.


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

Add a empty controller to project. Create a Json action to get data from database.
  public class DemoController : Controller
        // GET: /Demo/
        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 view for Index action. Add the UI Grid script to page.

Complete source of View (Index.cshtml):-

    ViewBag.Title = "Angular UI Grid Tutorial";
<h2>Angular UI Grid Tutorial</h2>

<div ng-app="mvcapp" ng-controller="DemoController">
    <div ui-grid="gridOptions" ui-grid-pagination 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', 'ui.grid.pagination']);
    app.controller('DemoController', function ($scope, $http) {
        $scope.gridOptions = {
            paginationPageSizes: [5, 10, 15],
            paginationPageSize: 5,
            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;

Build the project and run the application.

No comments:

Post a Comment