CODEWITHSUNDEEP
javascriptangularjsangular-ui-grid
moustacheman
moustacheman

Reputation: 1464

Angular UI Grid - Add or remove columns and update data

I am trying to add/remove columns from the grid and update the data. Here is the Plunker

HTML

<div ng-controller="MainCtrl">
    <div id="grid1" ui-grid="settings" class="grid"></div>

    <button ng-click="add();">Add</button>
  </div>

JS

app.controller('MainCtrl', ['$scope', function($scope) {
  $scope.result = [{
    "firstName": "Cox",
    "lastName": "Carney",
    "company": "Enormo",
    "employed": true
  }, {
    "firstName": "Lorraine",
    "lastName": "Wise",
    "company": "Comveyer",
    "employed": false
  }, {
    "firstName": "Nancy",
    "lastName": "Waters",
    "company": "Fuelton",
    "employed": false
  }];

  $scope.column_defs = [{
    name: 'First Name',
    field: 'firstName'
  }, {
    name: 'Last Name',
    field: 'lastName'
  }, {
    name: 'Company',
    field: 'company'
  }];

  $scope.settings = {
    data: $scope.result,
    columnDefs: $scope.column_defs
  };

  $scope.add = function() {
    $scope.column_defs = [{
      name: 'First Name',
      field: 'firstName'
    }, {
      name: 'Last Name',
      field: 'lastName'
    }, {
      name: 'Company',
      field: 'company'
    }, {
      name: 'Employed',
      field: 'employed'
    }];

    $scope.result = [{
      "firstName": "Cox",
      "lastName": "Carney",
      "company": "Enormo",
      "employed": true
    }, {
      "firstName": "Lorraine",
      "lastName": "Wise",
      "company": "Comveyer",
      "employed": false
    }];
  };
}]);

When we click 'Add' button, nothing happens whereas I am expecting to update the columnDefs and data.

Thanks in advance.

Upvotes: 1

Views: 2236

Answers (2)

Gary
Gary

Reputation: 3324

Here's my plunkr: http://plnkr.co/edit/avgavSB3hufCXHfe4nyX?p=preview It shows that you can use push/pop/splice on the grid.columnDefs object.

HTML

  <div ng-controller="MainCtrl">
    <div id="grid1" ui-grid="settings" class="grid"></div>
    <button ng-hide="employedVisible" ng-click="add();">Add</button>
    <button ng-show="employedVisible" ng-click="remove();">Remove</button>
  </div>

JS

var app = angular.module('app', ['ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', function($scope) {
  $scope.settings = {
    data: [{
      "firstName": "Cox",
      "lastName": "Carney",
      "company": "Enormo",
      "employed": true
    }, {
      "firstName": "Lorraine",
      "lastName": "Wise",
      "company": "Comveyer",
      "employed": false
    }, {
      "firstName": "Nancy",
      "lastName": "Waters",
      "company": "Fuelton",
      "employed": false
    }],
    columnDefs: [{
      displayName: 'First Name',
      name: 'firstName'
    }, {
      displayName: 'Last Name',
      name: 'lastName'
    }, {
      displayName: 'Company',
      name: 'company'
    }]
  };

  $scope.add = function() {
    for(var i = $scope.settings.columnDefs.length; i--;){
      if ($scope.settings.columnDefs[i].name === 'employed') {
        // Only add it once
        return;
      }
    }
    $scope.settings.columnDefs.push({
      displayName: 'Employed',
      name: 'employed'
    });
    $scope.employedVisible = true;
  };

  $scope.remove = function() {
    for(var i = $scope.settings.columnDefs.length; i--;){
      if ($scope.settings.columnDefs[i].name === 'employed') {
        $scope.settings.columnDefs.splice(i, 1);
        $scope.employedVisible = false;
        return;
      }
    }
  };
}]);

Upvotes: 0

fikkatra
fikkatra

Reputation: 5792

UI grid binds to $scope.settings. You need to refresh the $scope.settings variable to refresh the grid. Add this in $scope.add:

$scope.settings = {
    data: $scope.result,
    columnDefs: $scope.column_defs
  };

Upvotes: 3

Related Questions