CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scopeangular-ui-grid
user944513
user944513

Reputation: 12729

how to get event when column changed it position?

I am using UI-grid .In that I am using column moving functionality from here . http://ui-grid.info/docs/#/tutorial/217_column_moving Using that user change grid column position .I want a event when it successfully change the position of column. I want to show a alert after changing the position of column ..In other word I want to add callback function when it column is successfully drop .

Here is my code http://plnkr.co/edit/osrmsawxqhA7pEHYP1EE?p=preview I want to show alert after column position is changed 

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

<div ng-controller="MainCtrl">
<div class="grid" ui-grid="gridOptions" ui-grid-move-columns></div>
</div>


    <script src="app.js"></script>
  </body>
</html>

Upvotes: 3

Views: 1494

Answers (2)

Dinesh Vaitage
Dinesh Vaitage

Reputation: 3183

Used following code to handle column changed event 

$scope.gridOptions.onRegisterApi = function (gridApi) {
        $scope.gridApi = gridApi;
        $scope.gridApi.colMovable.on.columnPositionChanged();

      };

Used "ui-grid-move-columns" directive to handle column move events

<div class="grid" ui-grid="gridOptions" ui-grid-move-columns></div>

Upvotes: 0

s.xie
s.xie

Reputation: 169

You can use the API:

gridApi.colMovable.on.columnPositionChanged(scope,function(colDef, originalPosition, newPosition){})

Add following code snippet:

  $scope.gridOptions.onRegisterApi = function(gridApi) {
gridApi.colMovable.on.columnPositionChanged($scope,function(colDef, originalPosition, newPosition){
  alert('test');
})

};

http://plnkr.co/edit/DRl6sn4Wyk8uaurvVrwt?p=preview

Upvotes: 2

Related Questions