Is there a better way to switch and exit edit mode in ng grid?

Question

So far, I have managed to change the editing mode in the ng-grid using separate templates and displaying the correct template based on some user input.

Example: Plunker (resize the column, and then switch to another mode)

This is a problem because any reinstallation, sorting, or grouping of columns that have been previously generated is lost when switching from template to template.

Is there a better approach?

Bypass

If anyone is interested, I created a workaround for myself by modifying ng-grid.js 2.0.7

First, I changed cellEditTemplate.html and added the attribute disable-Cell = \ "! IsEditing \" (isEditing is the scope variable from the controller that will be needed with this workaround)

    $templateCache.put("cellEditTemplate.html",
      "<div ng-cell-has-focus disable-Cell=\"!isEditing\" ng-dblclick=\"editCell()\">\n" +
      "\t<div ng-edit-cell-if=\"!isFocused\">\t\n" +
      "\t\tDISPLAY_CELL_TEMPLATE\n" +
      "\t</div>\n" +
      "\t<div ng-edit-cell-if=\"isFocused\">\n" +
      "\t\tEDITABLE_CELL_TEMPLATE\n" +
      "\t</div>\n" +
      "</div>"
    );  

Then I modified the ngCellHasFocus directive and added $ watch for the disableCell attribute. If disableCell is set to true, I prevent the click and mousedown events from being included in this directive.

            return function ($scope, elm, attrs) {
                var disabled = false;
                //Added $watch
                $scope.$watch(attrs.disableCell, function (newVal) {
                    disabled = newVal;
                });
                var isFocused = false;
                var isCellEditableOnMouseDown = false;

                $scope.editCell = function () {
                    if (!$scope.enableCellEditOnFocus) {
                        setTimeout(function () {
                            focusOnInputElement($scope, elm);
                        }, 0);
                    }
                };
                elm.bind('mousedown', function (evt) {
                    //Added return
                    if (disabled) return;
                    if ($scope.enableCellEditOnFocus) {
                        isCellEditableOnMouseDown = true;
                    } else {
                        elm.focus();
                    }
                    return true;
                });
                elm.bind('click', function (evt) {
                    //Added return
                    if (disabled) return;
                    if ($scope.enableCellEditOnFocus) {
                        evt.preventDefault();
                        isCellEditableOnMouseDown = false;
                        focusOnInputElement($scope, elm);
                    }
                });
                elm.bind('focus', function (evt) {
                    isFocused = true;
                    if ($scope.enableCellEditOnFocus && !isCellEditableOnMouseDown) {
                        focusOnInputElement($scope, elm);
                    }
                    return true;
                });
                elm.bind('blur', function () {
                    isFocused = false;
                    return true;
                });
                elm.bind('keydown', function (evt) {
                    if (!$scope.enableCellEditOnFocus) {
                        if (isFocused && evt.keyCode !== 37 && evt.keyCode !== 38 && evt.keyCode !== 39 && evt.keyCode !== 40 &&    evt.keyCode !== 9 && !evt.shiftKey && evt.keyCode !== 13) {
                            focusOnInputElement($scope, elm);
                        }
                        if (isFocused && evt.shiftKey && (evt.keyCode >= 65 && evt.keyCode <= 90)) {
                            focusOnInputElement($scope, elm);
                        }
                        if (evt.keyCode === 27) {
                            elm.focus();
                        }
                    }
                    return true;
                });
            };
        }]);

And here are my grid options

        $scope.gridOptions = {
            data: 'myData',
            enableColumnResize: true,
            enableCellSelection: true,
            enableRowSelection: true,
            enableCellEditOnFocus: true,
            columnDefs: 'columnDefs',
            plugins: [layoutPlugin],
            //My row template has a ng-dblClick() attached to it for navigation in non-edit mode
            rowTemplate: 'Templates/gridRowView.html'
        };

Answer 1

, , , ( ). issue # 128 ng-grid git , . , , . , , , if/ .

, , "Excel". , . . , !

Answer 2

: columnDefs . columnDefs, . enableCellEdit.

$scope.columnDefs = [{ field:"name", displayName: "NAME", enableCellEdit: true},
                     { field:"age", displayName: "AGE", enableCellEdit: true}];


var options = { data: 'myData',
                columnDefs: 'columnDefs',
                multiSelect: false,
                enableCellEditOnFocus: true};


$scope.gridOptions = options;

$scope.makeReadOnly = function() {
    for(i in $scope.columnDefs)
      $scope.columnDefs[i].enableCellEdit = false;
}

: http://plnkr.co/edit/3Xoao5?p=info

: fooobar.com/questions/446293/...