Home Edit cell in ng-grid does not work properly
Reply: 0

Edit cell in ng-grid does not work properly

user8623
1#
user8623 Published in July 21, 2018, 8:51 pm

I am facing a problem in ng-grid edit cells. When i double clicked the cell and started to typing ... i can't type more than one characted or number ! here is link http://plnkr.co/edit/P3iujTWmQCwEDolcaPwC?p=preview

Any suggestion ? http://plnkr.co/edit/P3iujTWmQCwEDolcaPwC?p=previewvar app = angular.module('myApp', [ 'ngGrid' ]); app .controller( 'MyCtrl', function($scope) {

                        var name;
                        var age;
                        var birthday;
                        var salary;
                        var x;
                        $scope.submit = function() {
                            name = $scope.name;
                            age = $scope.age;
                            birthday = $scope.birthday;
                            salary = $scope.salary;

                            $scope.myData.push({
                                name : name,
                                age : age,
                                birthday : birthday,
                                salary : salary
                            });

                            // $scope.myData   = $scope.myData +x;
                        };

                        $scope.myData = [ {
                            name : "Moroni",
                            age : 50,
                            birthday : "Oct 28, 1970",
                            salary : "60,000"
                        }, {
                            name : "Tiancum",
                            age : 43,
                            birthday : "Feb 12, 1985",
                            salary : "70,000"
                        }, {
                            name : "Jacob",
                            age : 27,
                            birthday : "Aug 23, 1983",
                            salary : "50,000"
                        }, {
                            name : "Nephi",
                            age : 29,
                            birthday : "May 31, 2010",
                            salary : "40,000"
                        }, {
                            name : "Enos",
                            age : 34,
                            birthday : "Aug 3, 2008",
                            salary : "30,000"
                        }, {
                            name : "Moroni",
                            age : 50,
                            birthday : "Oct 28, 1970",
                            salary : "60,000"
                        }, {
                            name : "Tiancum",
                            age : 43,
                            birthday : "Feb 12, 1985",
                            salary : "70,000"
                        }, {
                            name : "Jacob",
                            age : 27,
                            birthday : "Aug 23, 1983",
                            salary : "40,000"
                        }, {
                            name : "Nephi",
                            age : 29,
                            birthday : "May 31, 2010",
                            salary : "50,000"
                        }, {
                            name : "Enos",
                            age : 34,
                            birthday : "Aug 3, 2008",
                            salary : "30,000"
                        }, {
                            name : "Moroni",
                            age : 50,
                            birthday : "Oct 28, 1970",
                            salary : "60,000"
                        }, {
                            name : "Tiancum",
                            age : 43,
                            birthday : "Feb 12, 1985",
                            salary : "70,000"
                        }, {
                            name : "Jacob",
                            age : 27,
                            birthday : "Aug 23, 1983",
                            salary : "40,000"
                        }, {
                            name : "Nephi",
                            age : 29,
                            birthday : "May 31, 2010",
                            salary : "50,000"
                        }, {
                            name : "Enos",
                            age : 34,
                            birthday : "Aug 3, 2008",
                            salary : "30,000"
                        } ];
                        $scope.gridOptions = {

                            data : 'myData',
                            pagingOptions : $scope.pagingOptions,
                            enablePinning : true,
                            enablePaging : true,
                            columnDefs : [
                                    {
                                        field : "name",
                                        width : 220,
                                        pinned : true,
                                        enableCellEdit : true
                                    },
                                    {
                                        field : "age",
                                        width : 200,
                                        enableCellEdit : true
                                    },
                                    {
                                        field : "birthday",
                                        width : 200,
                                        enableCellEdit : true
                                    },
                                    {
                                        field : "salary",
                                        width : 220,
                                        enableCellEdit : true, 
                                        cellTemplate :basicCellTemplate
                                    },
                                    {
                                        field : "Action",
                                        width : 200,
                                        enableCellEdit : false,
                                        cellTemplate : '<button id="editBtn" type="button" class="btn btn-xs btn-info"  ng-click="saveItem(row.entity.name, row.entity.surname,row.entity.address)" >Save</button>'
                                    } ]

                        };

                            $scope.selectedCell;
                            $scope.selectedRow;
                            $scope.selectedColumn;

                            $scope.editCell = function (row, cell, column){
                                $scope.selectedCell = cell;
                                $scope.selectedRow = row;
                                $scope.selectedColumn = column;
                              };

                              $scope.updateCell = function(){
                                  $scope.selectedRow[$scope.selectedColumn] = $scope.selectedCell;
                              };

                          var basicCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()" ng-click="editCell(row.entity, row.getProperty(col.field), col.field)"><span class="ui-disableSelection hover">{{row.getProperty(col.field)}}</span></div>';

                        $scope.filterOptions = {
                            filterText : "",
                            useExternalFilter : true
                        };

                        $scope.gridOptions.sortInfo = {
                            fields : [ 'name', 'age' ],
                            directions : [ 'asc' ],
                            columns : [ 0, 1 ]
                        };

                        $scope.totalServerItems = 0;

                        $scope.pagingOptions = {
                            pageSizes : [ 5, 10, 20 ],
                            pageSize : 5,
                            currentPage : 1
                        };
                        $scope.setPagingData = function(data, page,
                                pageSize) {
                            var pagedData = data.slice((page - 1)
                                    * pageSize, page * pageSize);
                            $scope.myData = pagedData;
                            $scope.totalServerItems = data.length;
                            if (!$scope.$$phase) {
                                $scope.$apply();
                            }
                        };

                    });`
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.253617 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO