$exceptionHandler

CRUD operations in AngularJs - ngGrid Edit/Delete Rows in AngularJs

The Reference files
?
1
2
3
4
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script> 
The HTML Code-sample
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
<form id="gridView" ng-app="ngGridApp">
<fieldset ng-controller="ngGridController">
  <legend>
         <div class="form-group has-error">
            <div class="col-md-3">
                <div class="input-group">
                       <input type="text" class="form-control" ng-model="filterOptions.filterText" placeholder="Search users..">
                         <span class="input-group-addon"><i class="fa fa-search"></i></span>
                   </div>
                </div>
         </div>
   </legend>
    <div>
     <div class="ngGridStyle" ng-grid="ngGridView"></div>
   </div>
 </fieldset>
</form>
<form id="gridView" ng-app="ngGridApp">
<fieldset ng-controller="ngGridController">
  <legend>
         <div class="form-group has-error">
            <div class="col-md-3">
                <div class="input-group">
                       <input type="text" class="form-control" ng-model="filterOptions.filterText" placeholder="Search users..">
                         <span class="input-group-addon"><i class="fa fa-search"></i></span>
                   </div>
                </div>
         </div>
   </legend>
    <div>
     <div class="ngGridStyle" ng-grid="ngGridView"></div>
   </div>
 </fieldset>
</form>
The AngularJs code-sample
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
var app = angular.module('ngGridApp', ['ngGrid']);
app.controller('ngGridController', function ($scope) {
    $scope.ACPreferences = [{
        Nominees: "Anil Singh",
        Email: '[email protected]',
        Threshold: '50%, 70%, 80%, 85%, 90%, 100%,120%',
        SendSMS: true,
        SendEmail: true,
        AlertOptIn: true
    },
    {
        Nominees: "Dilip Singh",
        Email: '[email protected]',
        Threshold: '50%, 70%, 80%, 85%, 90%, 100%,120%',
        SendSMS: true,
        SendEmail: false,
        AlertOptIn: true
    },
    {
        Nominees: "Vrendra",
        Email: '[email protected]',
        Threshold: '50%, 70%, 80%, 85%, 90%, 100%,120%',
        SendSMS: false,
        SendEmail: true,
        AlertOptIn: true
    }];
    $scope.filterOptions = {
        filterText: ''
    };
    $scope.pagingOptions = {
        pageSizes: [10, 20, 50, 100],
        pageSize: 10,
        totalServerItems: 0,
        currentPage: 1
    };
    var removeRowTemplate = '<span style="display:block; text-align:center;"><button ng-click="editRowIndex($index)" class="btn btn-xs btn-default"><i class="fa fa-pencil"></i></button><button ng-click="removeRowIndex($index)" class="btn btn-xs btn-default"><i class="fa fa-times"></i></button></span>';
    var onoffTemplate = '<span class="smart-form"><label class="toggle"><input type="checkbox" checked="checked" name="checkbox-toggle"><i data-swchoff-text="OFF" data-swchon-text="ON"></i></label></span>';
    $scope.myColumns = [{ field: 'Nominees', displayName: 'Nominees' },
            { field: 'Email', displayName: 'Email', editableCellTemplate: true, enableCellEdit: true },
            { field: 'Threshold', displayName: 'Threshold' },
            { field: 'SendSMS', displayName: 'Send SMS', width: "7%" },
            { field: 'SendEmail', displayName: 'Send Email', width: "8%" },
            { field: 'AlertOptIn', displayName: 'Alert Opt-In', width: "9%", cellTemplate: onoffTemplate },
            { field: 'remove', displayName: '', width: "7%", cellTemplate: removeRowTemplate } ];
    $scope.ngGridView = {
        data: 'ACPreferences',
        enablePaging: true,
        showFooter: true,
        filterOptions: $scope.filterOptions,
        pagingOptions: $scope.pagingOptions,
        columnDefs: 'myColumns'
    };
    $scope.removeRowIndex = function () {
        var index = this.row.rowIndex;
        $scope.ngGridView.selectItem(index, false);
        $scope.ACPreferences.splice(index, 1);
    };
    $scope.editRowIndex = function () {
        var index = this.row.rowIndex;
        alert('Row Index : ' + this.row.rowIndex);
    };
});
var app = angular.module('ngGridApp', ['ngGrid']);
app.controller('ngGridController', function ($scope) {
    $scope.ACPreferences = [{
        Nominees: "Anil Singh",
        Email: '[email protected]',
        Threshold: '50%, 70%, 80%, 85%, 90%, 100%,120%',
        SendSMS: true,
        SendEmail: true,
        AlertOptIn: true
    },
    {
        Nominees: "Dilip Singh",
        Email: '[email protected]',
        Threshold: '50%, 70%, 80%, 85%, 90%, 100%,120%',
        SendSMS: true,
        SendEmail: false,
        AlertOptIn: true
    },
    {
        Nominees: "Vrendra",
        Email: '[email protected]',
        Threshold: '50%, 70%, 80%, 85%, 90%, 100%,120%',
        SendSMS: false,
        SendEmail: true,
        AlertOptIn: true
    }];

    $scope.filterOptions = {
        filterText: ''
    };

    $scope.pagingOptions = {
        pageSizes: [10, 20, 50, 100],
        pageSize: 10,
        totalServerItems: 0,
        currentPage: 1
    };

    var removeRowTemplate = '<span style="display:block; text-align:center;"><button ng-click="editRowIndex($index)" class="btn btn-xs btn-default"><i class="fa fa-pencil"></i></button><button ng-click="removeRowIndex($index)" class="btn btn-xs btn-default"><i class="fa fa-times"></i></button></span>';
    var onoffTemplate = '<span class="smart-form"><label class="toggle"><input type="checkbox" checked="checked" name="checkbox-toggle"><i data-swchoff-text="OFF" data-swchon-text="ON"></i></label></span>';

    $scope.myColumns = [{ field: 'Nominees', displayName: 'Nominees' },
            { field: 'Email', displayName: 'Email', editableCellTemplate: true, enableCellEdit: true },
            { field: 'Threshold', displayName: 'Threshold' },
            { field: 'SendSMS', displayName: 'Send SMS', width: "7%" },
            { field: 'SendEmail', displayName: 'Send Email', width: "8%" },
            { field: 'AlertOptIn', displayName: 'Alert Opt-In', width: "9%", cellTemplate: onoffTemplate },
            { field: 'remove', displayName: '', width: "7%", cellTemplate: removeRowTemplate } ];

    $scope.ngGridView = {
        data: 'ACPreferences',
        enablePaging: true,
        showFooter: true,
        filterOptions: $scope.filterOptions,
        pagingOptions: $scope.pagingOptions,
        columnDefs: 'myColumns'
    };

    $scope.removeRowIndex = function () {
        var index = this.row.rowIndex;
        $scope.ngGridView.selectItem(index, false);
        $scope.ACPreferences.splice(index, 1);
    };

    $scope.editRowIndex = function () {
        var index = this.row.rowIndex;
        alert('Row Index : ' + this.row.rowIndex);
    };
});
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.