113_adding_and_removing_columns.ngdoc

@ngdoc overview
@name Tutorial: 113 Adding and removing columns
@description

You can dynamically add and remove columns, the grid watches the column defs and
updates appropriately.  The columns are by default shown in the order of the columnDefs,
although if/when the column move feature arrives the end user will be able to alter
that default.

You can dynamically change the display name on a column (along with some other column
def properties), and call the {@link api/ui.grid.core.api:PublicApi#notifyDataChange notifyDataChange}
api to force an update.

The recommended way to change the display of a column is to take advantage of the
{@link api/ui.grid.class:GridColumn#hideColum hideColum} and
{@link api/ui.grid.class:GridColumn#showColumn showColumn} functions
that are provided as part of the GridColumn object. However, it is worth mentioning, that
this will still require you to call notifyDataChange afterwardsin order to refresh the grid.
This is done as a way to allow you to perform multiple toggle operations prior to updating
the grid, which is a way to reduce the amount of $digest cycles that we trigger and improve
performance.

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

@example
<example module="app">
  <file name="app.js">
    var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);

    app.controller('MainCtrl', function MainCtrl($scope, $http, uiGridConstants) {
      var vm = this;

      vm.columns = [{ field: 'name' }, { field: 'gender' }];
      vm.gridOptions = {
        enableSorting: true,
        columnDefs: vm.columns,
        onRegisterApi: function(gridApi) {
          vm.gridApi = gridApi;
        }
      };

      vm.remove = function() {
        vm.columns.splice(vm.columns.length-1, 1);
      };

      vm.add = function() {
        vm.columns.push({ field: 'company', enableSorting: false });
      };

      vm.splice = function() {
        vm.columns.splice(1, 0, { field: 'company', enableSorting: false });
      };

      vm.unsplice = function() {
        vm.columns.splice(1, 1);
      };

      vm.toggleDisplayName = function() {
        if( vm.columns[1].displayName === 'GENDER' ){
          vm.columns[1].displayName = 'Gender';
        } else {
          vm.columns[1].displayName = 'GENDER';
        }
        vm.gridApi.core.notifyDataChange( uiGridConstants.dataChange.COLUMN );
      };

      vm.toggleVisible = function() {
        var firstColumn = vm.gridApi.grid.columns[0];

        if (firstColumn.visible) {
          firstColumn.hideColumn();
        } else {
          firstColumn.showColumn();
        }
        vm.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
      };

      $http.get('/data/100.json')
        .then(function(response) {
          vm.gridOptions.data = response.data;
        });

      $scope.$on('$destroy', function() {
        vm.gridApi = null;
      });
    });
  </file>
  <file name="index.html">
    <div ng-controller="MainCtrl as $ctrl">
      Try clicking the Add button to add the company column.
      Try clicking the Remove button to remove the last column.
      Try clicking the Splice button to insert a column in the middle.
      <br>
      <br>
      <button id="button_add" class="btn btn-default" ng-click="$ctrl.add()">Add</button>
      <button id="button_remove" class="btn btn-default" ng-click="$ctrl.remove()">Remove Last</button>
      <button id="button_splice" class="btn btn-default" ng-click="$ctrl.splice()">Splice</button>
      <button id="button_unsplice" class="btn btn-default" ng-click="$ctrl.unsplice()">Remove Middle</button>
      <button id="button_toggle_visible" class="btn btn-default" ng-click="$ctrl.toggleVisible()">Toggle Visible</button>
      <button id="button_toggle_display_name" class="btn btn-default" ng-click="$ctrl.toggleDisplayName()">Toggle Display Name</button>
      <div id="grid1" ui-grid="$ctrl.gridOptions" class="grid"></div>
    </div>
  </file>
  <file name="main.css">
    .grid {
      width: 500px;
      height: 250px;
    }
  </file>
  <file name="scenario.js">
    var gridTestUtils = require('../../test/e2e/gridTestUtils.spec.js');
    describe( '113 dynamically changing columns', function() {
      it('grid should have two visible columns', function () {
        gridTestUtils.expectHeaderColumnCount( 'grid1', 2 );
      });

      xit('add and remove columns from end, grid updates accordingly', function () {
        element(by.id('button_add')).click();
        gridTestUtils.expectHeaderColumnCount( 'grid1', 3 );
        gridTestUtils.expectHeaderCellValueMatch( 'grid1', 1, 'Gender' );
        gridTestUtils.expectHeaderCellValueMatch( 'grid1', 2, 'Company' );

        element(by.id('button_remove')).click();
        gridTestUtils.expectHeaderColumnCount( 'grid1', 2 );
        gridTestUtils.expectHeaderCellValueMatch( 'grid1', 1, 'Gender' );
      });

      xit('add and remove columns in middle, grid updates accordingly', function () {
        element(by.id('button_splice')).click();
        gridTestUtils.expectHeaderColumnCount( 'grid1', 3 );
        gridTestUtils.expectHeaderCellValueMatch( 'grid1', 1, 'Company' );
        gridTestUtils.expectHeaderCellValueMatch( 'grid1', 2, 'Gender' );

        element(by.id('button_unsplice')).click();
        gridTestUtils.expectHeaderColumnCount( 'grid1', 2 );
        gridTestUtils.expectHeaderCellValueMatch( 'grid1', 1, 'Gender' );
      });

      xit('toggle column 0 visible should make column appear and disappear', function () {
        element(by.id('button_toggle_visible')).click();
        gridTestUtils.expectHeaderColumnCount( 'grid1', 1 );
        gridTestUtils.expectHeaderCellValueMatch( 'grid1', 0, 'Gender' );

        element(by.id('button_toggle_visible')).click();
        gridTestUtils.expectHeaderColumnCount( 'grid1', 2 );
        gridTestUtils.expectHeaderCellValueMatch( 'grid1', 0, 'Name' );
      });

      it('toggle display name should change column header', function () {
        gridTestUtils.expectHeaderCellValueMatch( 'grid1', 1, 'Gender' );
        element(by.id('button_toggle_display_name')).click();
        gridTestUtils.expectHeaderCellValueMatch( 'grid1', 1, 'GENDER' );
        element(by.id('button_toggle_display_name')).click();
        gridTestUtils.expectHeaderCellValueMatch( 'grid1', 1, 'Gender' );
      });
    });
  </file>
</example>