217_column_moving.ngdoc

@ngdoc overview
@name Tutorial: 217 Column Moving
@description

<div class="alert alert-warning" role="alert"><strong>Alpha</strong> This feature is in development. There will almost certainly be breaking api changes, or there are major outstanding bugs.</div>

Feature ui.grid.moveColumns allows moving column to a different position. To enable, you must include the `ui.grid.moveColumns` module
and you must include the `ui-grid-move-columns` directive on your grid element.

Documentation for the moveColumns feature is provided in the api documentation, in particular:

- {@link api/ui.grid.moveColumns.api:ColumnDef columnDef}
- {@link api/ui.grid.moveColumns.api:GridOptions gridOptions}
- {@link api/ui.grid.moveColumns.api:PublicApi publicApi}

By default column moving will be enabled for all the columns of the grid. To disable it for all columns of grid property `enableColumnMoving`
of grid options can be used. To specifically enable or disable column moving for a specific column property `enableColumnMoving`
of column definitions can be used.

Columns can be repositioned by either dragging and dropping them to specific position. Alternatively, gridApi method
`gridApi.colMovable.moveColumn(oldPosition, newPosition)` can also be used to move columns. The column position ranging from 0
(in the leftmost) up to number of visible columns in the grid (in the rightmost).

For better performance with the following example, you can choose to load the ui-grid.core.js and specific feature files instead:
<pre>
  <script src="/release/ui-grid.core.min.js"></script>
  <script src="/release/ui-grid.move-columns.min.js"></script>
</pre>

@example
<example module="app">
  <file name="app.js">
    var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.moveColumns']);
    app.controller('MainCtrl', function ($scope, $http) {
      var vm = this;

      vm.gridOptions = {
        columnDefs: [
          { name: 'id'},
          { name: 'name'},
          { name: 'age'},
          { name: 'gender'},
          { name: 'email'},
        ]
      };

      $http.get('/data/500_complex.json')
        .then(function(response) {
          vm.gridOptions.data = response.data;
        });
    });
  </file>
  <file name="main.css">
    .grid {
      width: 100%;
      height: 400;
    }
  </file>
  <file name="index.html">
    <div ng-controller="MainCtrl as $ctrl">
    <div class="grid" ui-grid="$ctrl.gridOptions" ui-grid-move-columns></div>
    </div>
  </file>
</example>