ng-grid in angularjs

What is ng-grid? How to achieve it?

The ng-grid is purely angularjs library, it's based on slick-grid and Its highly customizable and performance data-grid.

Go to below ng-grid library link http://angular-ui.github.io/ng-grid/

Steps to achieve the ng-grid as given below

1.       Add the angularjs reference file
2.       Add ng-grid reference file
3.       Written the JavaScript code to render the ng-grid data.
4.       Written the HTML code for render the DOM with ng-grid data.

 The AngularJs Reference file download from as given below link


The ng-grid Reference file download from as given below link


The JavaScript code sample

        //This is current loged user UIds.
        var uid = parseInt(session().mobileNo);
        var baseURL ="http://locahost:8080/"

        var app = angular.module('ngGridApp', ['ngGrid']);

        app.service('ngGridService', function ($http) {
            this.getStudents = function () {
                return $http({
                    method: 'GET',
                    url: baseURL + 'Api/Students/Get/' + uid
                });
            };
        });

        app.controller('ngGridCtrl', function ($scope, ngGridService) {
            $scope.students = null;

            //Call services method in Controller.
            ngGridService.getStudents().then(function (resp) {
                if (resp.data !== undefined && resp.data !== null) {
                    $scope.students = resp.data;
                }
            })
              .finally(function () {
                  //TODO: If needed anything else by you!
              });

            //This is custom template used to display custom data.
            var dateWithUpdatedBy = '<div>{{row.entity.LastUpdateBy}},  {{row.entity.LastUpdateDate | date:"yyyy-MM-dd"}}</div>';

            $scope.studentsColumns = [
                { field: 'MobileNo', displayName: 'MobileNo' },
                { field: 'StudentName', displayName: 'StudentName' },
                { field: 'Email', displayName: 'Contact Email'},
                {
                    field: 'LastUpdateBy', displayName: 'Last Update'
                    cellTemplate: dateWithUpdatedBy
        }];

        $scope.studentsGridView = {
            data: 'students',
            columnDefs: 'studentsColumns',
            enablePaging: false,
            showFooter: false,
            sortable: true
        };
        });

The HTML code sample
<div ng-app="ngGridApp">
    <div ng-controller="ngGridCtrl">
        <div class="ngGridStyle" ng-grid="companyGridView"></div>
    </div>
</div >

The full(JavaScript + HTML) live demo code sample
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.angularjs.org/1.3.14/angular.js"></script>
    <script>

        //This is current loged user UIds.
        var uid = parseInt(session().mobileNo);
        var baseURL ="http://locahost:8080/"

        var app = angular.module('ngGridApp', ['ngGrid']);

        app.service('ngGridService', function ($http) {
            this.getStudents = function () {
                return $http({
                    method: 'GET',
                    url: baseURL + 'Api/Students/Get/' + uid
                });
            };
        });

        app.controller('ngGridCtrl', function ($scope, ngGridService) {
            $scope.students = null;

            //Call services method in Controller.
            ngGridService.getStudents().then(function (resp) {
                if (resp.data !== undefined && resp.data !== null) {
                    $scope.students = resp.data;
                }
            })
              .finally(function () {
                  //TODO: If needed anything else by you!
              });

            //This is custom template used to display custom data.
            var dateWithUpdatedBy = '<div>{{row.entity.LastUpdateBy}},  {{row.entity.LastUpdateDate | date:"yyyy-MM-dd"}}</div>';

            $scope.studentsColumns = [
                { field: 'MobileNo', displayName: 'MobileNo' },
                { field: 'StudentName', displayName: 'StudentName' },
                { field: 'Email', displayName: 'Contact Email'},
                {
                    field: 'LastUpdateBy', displayName: 'Last Update'
                    cellTemplate: dateWithUpdatedBy
        }];

        $scope.studentsGridView = {
            data: 'students',
            columnDefs: 'studentsColumns',
            enablePaging: false,
            showFooter: false,
            sortable: true
        };
        });
    </script>
</head>

<body ng-app="ngGridApp">
    <div ng-controller="ngGridCtrl">
        <div class="ngGridStyle" ng-grid="companyGridView"></div>
    </div>
</body>

</html>

About Blogger

ANIL SINGH

Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
http://www.code-sample.com
http://www.code-sample.xyz

    Blogger Comment
    Facebook Comment

1 comments:

  1. pls post crud operations on ng-grid angularjs
    in asp.netmvc

    ReplyDelete

SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book