How to implement Angular UI Grid in ASP.NET MVC 5 ~ MiTechDev.com

Mitechdev.com is a programming blog which focused on Web Programming and development

Thursday, 9 June 2016

How to implement Angular UI Grid in ASP.NET MVC 5

09:06:00 Posted by raviteja swayampu , , 4 comments
Hello every one welcome to you all.Thank u for a huge response to my previous post CRUD operations using angular js in  MVC5 with Bootstrap.In this tutorial i will explain about Angular UI Grid a complete data grid that uses angular js completely no other plugin required.You can get the official documentation on this here but it is not friendly for beginner who learning angular js.So, i try to explain it as simple as possible with small application later i will post more complex implementations using Angular js in this site.I recently read this quote in some site it is very small sentence but very meaningful.
 If you want to study you can study it in very less time but if you want to learn it took some time.
So, I want to make you learn things but it takes some time.
The sample Angular UI Grid is like this,


Features of Angular UI Grid

Following are some features of the Angular UI Grid,
1.It is completely customizable.
Note: You can customize the themes and styles of the grid here. using Grid Customizer tool
2.It is completely open source no need to pay even a single penny for licenses.
3.Easily configurable in web application.
4.Sorting functionality,
5.Filtering ,
6.Interaction with user.
7.Easily testable.

Advanced Features:
1.Grouping
2.column pinning
3.Virtualization
4.Edit in place facility
5.Expandable rows
6.Internationalization

Implementation of Angular UI Grid

Step 1: Create MVC web application 

1.Open Visual studio 2013
2.create a web applications with ASP.NET MVC 5 template.
3.While creating choose MVC basic template which includes some java script library files in solution.
4.Create a Controller
5.Right click on Controllers folder --> Add --> select Empty controller --> name it as Home Controller.
6.Create a Index action method and add view to this action by right clicking on method --> Add View --> select Empty template --> click Add.

Step 2: Add Angular Reference files to Project.

1.We can add reference file using Nuget package manager console other wise you can download from official site.
2.Right click on solution --> Manage nuget packages --> now search for files and Add them to solution.


3.Add below reference files in _Layout.cshtml page.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <link href="~/Content/Site.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Scripts/modernizr-2.6.2.js"></script>
    @*Angular js CDN reference files*@
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    @*Grid export reference files*@
    <!--<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>-->
    <script src="~/Scripts/ui-grid.min.js"></script>
    <link href="~/Content/ui-grid.min.css" rel="stylesheet" />
    <script src="~/Scripts/gridscripts/app.js"></script>
</head>
<body>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    @RenderSection("scripts", required: false)
</body>
</html>

Step 3: Add Angular script to the project for grid.

1.Right click on Scripts folder and add new java script file.
2.Replace the code of the java script file with below code.

//Angular application 
//must add ui.grid  dependency when application initialization for grid
//ui.grid.pagination dependency for pagination display
//These dependencies are loaded into angular app while app initilization.
var app = angular.module('app', ['ngTouch','ui.grid','ui.grid.pagination']);
//angular controller for business logic
app.controller('gridcontroller', function ($scope) {
    $scope.title = "Angular UI Grid Demo ";
    $scope.gridOptions = {
        //grid pagination
        paginationPageSizes: [10,25, 50, 75],
        paginationPageSize: 10,
        enableSorting:true,
        //enabling filtering
        enableFiltering:true,
        //column definations
        //we can specify sorting mechnism also
        ColumnDefs: [
            {field: 'Name'},
            {field: 'Age'},
            {field: 'Location'},
            {field: 'DOB',enableFiltering:false}
        ],     
    };
    //api that is called every time
    // when data is modified on grid for sorting
    $scope.gridOptions.onRegisterApi = function (gridApi) {
        $scope.gridApi = gridApi;
    }
    //Grid data
    $scope.users = [
            { name: "Madhav Sai", age: 10, location: 'Nagpur',DOB:'10/2/1994' },
            { name: "Suresh Dasari", age: 30, location: 'Chennai',DOB:'02/03/1992' },
            { name: "Rohini Alavala", age: 29, location: 'Chennai',DOB:'9/9/1989' },
            { name: "Praveen Kumar", age: 25, location: 'Bangalore',DOB:'5/5/1988' },
            { name: "Sateesh Chandra", age: 27, location: 'Vizag' ,DOB:'9/3/1999'},
            { name: "Siva Prasad", age: 38, location: 'Nagpur',DOB:'4/5/1983' },
            { name: "Sudheer Rayana", age: 25, location: 'Kakinada',DOB:'01/1/1985' },
            { name: "Honey Yemineni", age: 7, location: 'Nagpur' ,DOB:'4/4/1980'},
            { name: "Mahendra Dasari", age: 22, location: 'Vijayawada',DOB:'19/4/1970' },
            { name: "Mahesh Dasari", age: 23, location: 'California',DOB:'19/9/1965' },
            { name: "Nagaraju Dasari", age: 34, location: 'Atlanta',DOB:'30/4/1977' },
            { name: "Gopi Krishna", age: 29, location: 'Repalle' ,DOB:'28/6/1980'},
            { name: "Sudheer Uppala", age: 19, location: 'Guntur' ,DOB:'8/5/1966'},
            { name: "Sushmita", age: 27, location: 'Vizag',DOB:'09/2/1993' }
    ];
    //binding user data to grid.
    $scope.gridOptions.data = $scope.users;
});

3.Here i took some sample data and bind it to grid for display.
4.We can enable/disable sorting/filtering/pagination simply specifying true/false.
5.We can sort data by clicking on header.

Step 4: Add View to display Grid

1.Now finally replace the code in the Index view with below code.

@{
    ViewBag.Title = "Home Page";
}
<style>
    /*.grid {
      width: 800px;
      height: 400px;
    }*/
    .myGrid {
        width: 700px;
        height: 400px;
    }
</style>
<div class="container">
    <div ng-app="app" ng-controller="gridcontroller">
        <h3>{{title}}</h3>
        <!--grid display element-->
        <div ui-grid="gridOptions" ui-grid-pagination class="myGrid"></div>
    </div>
</div>

2.Run the application and see the output in browser.


3.This is all about basic Angular UI grid.
4.In future posts we will learn about editing inline data,infinite scrolling,sub grids,multiple grids in a page etc.

Download source code of this tutorial from here source code.

Conclusion:

I hope this tutorial is understandable for every reader.please recommend to improve the quality this article.Please subscribe to this site to get News letters.To get daily updates follow through social networks(facebook,twitter,google plus).


4 comments:

  1. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Very informative
      I think its a similar to JQGrid
      waiting for next article

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Hi,
    Thanks for tutorial, it's very help.

    May I request article, sample CRUD to database with relation table

    Thanks
    Budi

    ReplyDelete