Sort and filter Grid using AngularJs in MVC

Here in this article I am going to explain how to sort and search the data in grid and also highlight the searched matched text using Angularjs in MVC application.

Description:

I am displaying the data in table using ng-repeat. I want to sort and search the data in grid also highlight the searched text results. 

Implementation:

I have created a table Employee and inserted dummy record into it. I am using database first approach.

Model:

    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 empty Controller. Create json method to fetch the records from database. Here is code of Controller:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using MVC_Project.Models;

namespace MVC_Project.Controllers

{

    public class AngularController : Controller

    {

        //

        // GET: /Angular/

        DemoEntities1 db = new DemoEntities1();

        public ActionResult Index()

        {

            return View();

        }

        public JsonResult GetEmployees()

        {

            var emp = db.Employees.ToList();

            return Json(emp, JsonRequestBehavior.AllowGet);          

        }       

    }

}

Add View

Now add view for Index action. Write the code on view as given below:

Complete Code of Inedx.Cshtml

@{

    ViewBag.Title = "MVC-AngualarJs Tutorial";

}

<style>

    table tr td th {

        text-align: center;

        border:none;

    }

    .ng-binding {

        padding: 40px;

    }

     a {

        text-decoration: none;

        color: #2196F3;

    }

     /*tr:nth-child(odd) {

        background: #b8d1f3;

    }

      Define the background color for all the EVEN background rows 

     tr:nth-child(even) {

        background: #dae5f4;

    }

    .match {

        background: #24D0F9;

    }*/

    .highlighttext {

        background: #F44336;

        color: #fff;

    }

</style>

<fieldset style="width:90%">

    <legend>MVC-AngualarJs Search(Filter) and Highlight Searched text Tutorial</legend>

    <div ng-app="mvcapp" ng-controller="AngularController">    

              <table>

           <tr>

               <td>Search :</td>

               <td colspan="2"><input type="text" ng-model="empname" placeholder="Search"></td>

           </tr>

           <tr>

               <td></td>

               <td></td>

           </tr>

       </table>

  

       <table>         

           <tr>

               <th><a href="" ng-click="columnToOrder='id';reverse=!reverse">S.No.</a></th>

            

               <th>

                   <a href="" ng-click="columnToOrder='Name';reverse=!reverse">Name</a>

               </th>            

               <th>

                   <a href="" ng-click="columnToOrder='Phone';reverse=!reverse">Phone</a>

               </th>

               <th>

                   <a href="" ng-click="columnToOrder='Department';reverse=!reverse">Department</a>

               </th>

          

               <th>

                   <a href="" ng-click="columnToOrder='Salary';reverse=!reverse">Salary</a>

               </th>

            

               <th>

                   <a href="">Image</a>

               </th>

             

               <th >

                   <a href="" ng-click="columnToOrder='EmailId';reverse=!reverse">Email</a>

               </th>

           </tr>

           <tr ng-repeat="emp in employees| filter:empname |orderBy:columnToOrder:reverse">

               <td>{{$index+1}}</td>

               <td><span ng-bind-html="emp.Name|highlight:empname"></span></td>

               <td>{{emp.Phone }}</td>

               <td>{{emp.Department}}</td>

               <td>{{emp.Salary }}</td>

               <td><img ng-src="{{emp.ImagePath || 'images/image.jpg'}}" alt="" title="{{emp.Name}}" width="150" height="150" /></td>

               <td><span ng-bind-html="emp.EmailId ||'email not available'|highlight:empname"></span></td>

           </tr>

       </table>

        <div ng-show="(employees|filter:empname).length==0" style="color:red;font-weight:bold">No Result Found</div>

    </div>

</fieldset>

//Script

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

<script>

    var angular = angular.module('mvcapp', []);

  

    angular.controller('AngularController', ['$scope', '$http',function ($scope, $http) {

        $http.get('/Angular/GetEmployees').success(function (data) {

            $scope.employees = data;           

        })      

    }]).filter('highlight', function ($sce) {

        return function (text, phrase) {

            if (phrase) text = text.replace(new RegExp('(' + phrase + ')', 'gi'),

              '<span class="highlighttext">$1</span>')

            return $sce.trustAsHtml(text)

        }

    });

</script>

Now save the project, build and run. To test it search a record exist in database. Matched record will be highlight in red color with white text.