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.

Sort and filter Grid using AngularJs in MVC


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.


Post a Comment

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

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