How to disable sorting while editing in angular ui grid

I am using angular ui-grid to display tabular data.

These cells can be edited. I noticed that if the column is sorted, and then if we edit the cell, the sorting starts and moves the row. I would like to disable sort by cell editing, is there any way to do this. I have provided the plunker link below. In plunk, first sort the first column in ascending order, then edit the value a2 to say x, and click outside the cell, you will see that the remaining row has now moved to the last. I would like to prevent sorting while editing, basically it is OK if we remove all existing active sorting columns when editing.

  & ltdiv id = "grid1" ui-grid = "gridOptions" class = "grid" ui-grid-edit & gt
  & lt / div & gt
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid','ui.grid.edit',
            'ui.grid.selection',
            'ui.grid.rowEdit', 'ui.grid.cellNav']);
app.controller('MainCtrl', function($scope) {
  $scope.gridOptions = {
    enableSorting: true,
    columnDefs: [
      { field: 'A' },
      { field: 'B' },
      { field: 'C', enableSorting: false }
    ],
    onRegisterApi: function( gridApi ) {
      $scope.gridApi = gridApi;
    }
  };

  $scope.gridOptions.data = [{'A':'a1', 'B':'b1', 'C':'c1'}, {'A':'a3', 'B':'b3', 'C':'c3'}, {'A':'a2', 'B':'b2', 'C':'c2'}];

});

see Plunk for behavior http://plnkr.co/edit/17H5K6nOEz9gf4Keeap9?p=preview

enter image description here

+4
source share
3 answers

From the callback beginEditCellyou can find out when the user is editing. You can take advantage of saving and restoring ui-grid states. Save and restore the state of the Ui-grid From the callback afterCellEditor cancelCellEdityou can find out when the user has completed editing, then you can restore.

+1
source

set enableSorting to false

enableSorting: false
0

, .

- (registerDataChangeCallback), notifyDataChange processRowsCallback, processRowsCallback .

Grid.prototype.processRowsCallback = function processRowsCallback( grid ){
    grid.queueGridRefresh();
  };

Grid - factory, processRowsCallback factory grid.queueGridRefresh(), .

, processRowsCallBack, Grid factory factory, (extendedGridFactory), , , editmode grid.queueGridRefresh(); .

app.factory('extendedGridFactory', ['Grid', '$rootScope', function (Grid, rootScope) {
    var extendedGrid = Object.create(Grid);
    extendedGrid.prototype.processRowsCallback = function processRowsCallback(grid) {
        if (!rootScope.isInEditMode) {
            grid.queueGridRefresh();
        }
    };
    return extendedGrid;
}]);

, .

, - .:)

0
source

Source: https://habr.com/ru/post/1616689/


All Articles