$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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book