Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

Grid Implementation in Angular JS

Article:
Viewed:  1133 
Posted On:  18/05/2015 22:48:15 
Here I am showing implementation of grid some added functionality like searching in grid, sorting in grid and remove columns from grid. 

 

Here I am showing implementation of Grid with Angular JS. How you can create a grid with much more functionality like search, remove columns and sorting.

Below is my Grid.Html

<!DOCTYPE html>
<html ng-app="myApp"> 
    <head lang="en">
        <meta charset="utf-8">
        <title>Getting Started With ngGrid Example</title> 
        <link rel="stylesheet" type="text/css" href="ng-grid.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
        <script type="text/javascript" src="ng-grid-1.3.2.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body ng-controller="MyCtrl">
        <div class="gridStyle" ng-grid="gridOptions"></div>
    </body>
</html>
 

main.js:

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function ($scope) {
    $scope.myData = [{ Name: "Shalini", age: 26, Experience: 8 },
                     { Name: "Deepak", age: 28, Experience: 3 },
                     { Name: "Reshabh", age: 27, Experience: 4 },
                     { Name: "Rahul", age: 15, Experience: 5 },
                     { Name: "Ankita", age: 34, Experience: 6 },
                     { Name: "Ankur", age: 34, Experience: 9 },
                     { Name: "Tushar", age: 34, Experience: 2 },
                     { Name: "Mansi", age: 34, Experience: 1 },
                     { Name: "Aaryan", age: 34, Experience: 7 }];
            $scope.gridOptions = { data: 'myData' };

    });
 

Style.Css

.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 400px;
    height: 300px
}
 
 

Output:

1.png

Image 1.
 

Searching In Grid:-

2.png

Image 2.
 

Sorting in Grid:- 

3.png

Image 3.
 

Remove Column From Grid:-
 

4.png

Image 4.

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us