04 September 2016 Sudhanshu Ranjan 1.01k

Bind gridview and paging example in angularjs

In my previous article I had described about Redirect URL non-www to www using web.config in MVC ASP.Net and today I am going to show how to bind the data in grid view and paging using angularjs.It is very easiest way to bind grid and implement paging. You should follow the steps to bind the data and implement paging.

Step 1:  Create an application and add index.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
<script type="text/javascript" src="Scripts/dirPagination.js"></script>	
<script type="text/javascript" src="Scripts/module.js"></script>	
<link rel="stylesheet" type="text/css" href="Css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="Css/Site.css" />
</head>

<body ng-controller="countryController" style="margin:5%; width:50%;">
<div>
<div class="outer-grid">
            <div class="row header-grid">
                <div class="col">Country Id</div>
                <div class="col">Country Name</div>                
                <div class="col">Active</div>                
            </div>
            <div dir-paginate="country in Countries|itemsPerPage:5">
                <div class="row">
                    <div class="col">{{country.Id}}</div>
                    <div class="col">{{ country.CountryName }}</div>                    
                    <div class="col"> {{ country.IsActive }}</div>                   
                </div>
                <div style="border-bottom:1px solid #808080;"></div>
            </div>
            <dir-pagination-controls max-size="5"
                                     direction-links="true"
                                     boundary-links="true">
            </dir-pagination-controls>
            <div>

            </div>
        </div>
</div>
<div>
SUDHANSHU RANJAN :: <a href="http://www.dotnetcube.com" target="_blank">DOTNETCUBE</a>
</div>
</body>
</html>

 

Step 2:  add module.js file angular code

var app = angular.module("myApp", ['angularUtils.directives.dirPagination']);

app.controller("countryController", function ($scope){
									
$scope.Countries=[{Id : 1,CountryName:"India",IsActive:true},
				  {Id : 2,CountryName:"USA",IsActive:true},
				  {Id : 3,CountryName:"Sri Lanka",IsActive:true},
				  {Id : 4,CountryName:"Japan",IsActive:true},
				  {Id : 5,CountryName:"UK",IsActive:true},
				  {Id : 6,CountryName:"Nepal",IsActive:true},
				  {Id : 7,CountryName:"Pakistan",IsActive:true},
				  {Id : 8,CountryName:"Afganistan",IsActive:true},
				  {Id : 9,CountryName:"China",IsActive:true},
				  {Id : 10,CountryName:"Bhutan",IsActive:true},
				  {Id : 11,CountryName:"Canada",IsActive:true},
				  {Id : 12,CountryName:"South Koriya",IsActive:true},
				  {Id : 13,CountryName:"North Koria",IsActive:true},
				  {Id : 14,CountryName:"South Africa",IsActive:true},
				  {Id : 15,CountryName:"Brajil",IsActive:true},
				  {Id : 16,CountryName:"Spen",IsActive:true}
				];				
});

 

There is another dirPagination.js file added in application for paging. If you are facing some problem to implement you can also download sample application demo to understand.

 

Download the sample project

You can share at :

About Author
Sudhanshu Kumar Ranjan | Lead Engineer at HCL Technologies | Expertise in Microsoft Technology | Author | Blogger | Programmer
Know More
Connect with him on Facebook | Google+ | LinkedIn | Twitter

Recommended Post

Leave a comment

About Dotnet Cube

It's my blog - Dotnet Cube, where you will learn and get solutions about programming, web designing and development. I started this website to share my knowledge and experience which might help someone.

You can get more details about me and my blog at About Us page.

Subscribe Newsletter

Subscribe to our monthly newsletter to get the latest industry news, Media Group updates and our current specials.

Follow On Us...

Home | About | Advertise | Copyrights | Privacy | Contact | Admin

Copyrights © 2015-2017 dotnetcube.com. All rights reserved