Angular UI Grid - Add or remove columns and update data

Question

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.

fikkatra · Accepted Answer · 2016-04-20 07:41:37Z

3

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
  };

answered Apr 20, 2016 at 7:41

fikkatra

5,9024 gold badges45 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

moustacheman Over a year ago

So, you mean there is no use of using of having $scope.column_defs and instead, we need to directly update $scope.settings.columnDefs everytime. I remeber in ng-grid, we had $scope.settings.columnDefs = 'column_defs' and whenever the $scope.column_defs change, the grid is updated.

fikkatra Over a year ago

Yes. It works that way with data (you can do $scope.settings.data = 'result'), but it doesn't work with columnDefs

moustacheman Over a year ago

You are right, tried different approach but no success. Agree your answer.

Gary · Accepted Answer · 2016-10-06 21:11:30Z

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;
      }
    }
  };
}]);

Collectives™ on Stack Overflow

Angular UI Grid - Add or remove columns and update data

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related