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

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

, , , , , Edit
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="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> 
<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: 'anil.singh@gmail.com',
        Threshold: '50%, 70%, 80%, 85%, 90%, 100%,120%',
        SendSMS: true,
        SendEmail: true,
        AlertOptIn: true
    },
    {
        Nominees: "Dilip Singh",
        Email: 'dilip@gmail.com',
        Threshold: '50%, 70%, 80%, 85%, 90%, 100%,120%',
        SendSMS: true,
        SendEmail: false,
        AlertOptIn: true
    },
    {
        Nominees: "Vrendra",
        Email: 'Vrendra@gmail.com',
        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: 'anil.singh@gmail.com',
        Threshold: '50%, 70%, 80%, 85%, 90%, 100%,120%',
        SendSMS: true,
        SendEmail: true,
        AlertOptIn: true
    },
    {
        Nominees: "Dilip Singh",
        Email: 'dilip@gmail.com',
        Threshold: '50%, 70%, 80%, 85%, 90%, 100%,120%',
        SendSMS: true,
        SendEmail: false,
        AlertOptIn: true
    },
    {
        Nominees: "Vrendra",
        Email: 'Vrendra@gmail.com',
        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 Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

CRUD operations in AngularJs - ngGrid Edit/Delete Rows in AngularJs CRUD operations in AngularJs - ngGrid Edit/Delete Rows in AngularJs Reviewed by Anil Singh on 11:02 PM Rating: (5)
www.code-sample.com/. Powered by Blogger.
^