angularjs UI grid - assign columns and data dynamically

Question

I am trying to add columns dynamically to the ui-grid and also assigning the data. First time, the grid is working good. But, when i try to change the columns and data dynamically, it is not working as expected.

$scope.myfunc = function() {

alert("Rebinding the data");
$scope.gridOptions = {};

$scope.gridOptions.columnDefs.push({
 name: 'firstName'
  });
  $scope.gridOptions.columnDefs.push({
 name: 'lastName'
  });
  $scope.gridOptions.columnDefs.push({
 name: 'company'
  });
  $scope.gridOptions.columnDefs.push({
 name: 'employed'
  });

  alert("added new columns");
  $scope.gridOptions.data = data1;

  $scope.gridApi.grid.refresh();
};

please check the plunkr

Can anybody look into this issue and suggest me how to do this?

Python Basketball · Accepted Answer · 2016-06-14 03:11:46Z

6

i think you can remove the code: $scope.gridOptions = {};

the latest plunker

the second data1 should be pushed into the first data

I have changed the plunker with the latest code, pls check it!

 $scope.myfunc = function()
  {

    alert("Rebinding the data");
     $scope.gridOptions.columnDefs = new Array();

    $scope.gridOptions.columnDefs.push({
     field: 'firstName'
      });
      $scope.gridOptions.columnDefs.push({
     field: 'lastName'
      });
      $scope.gridOptions.columnDefs.push({
     field: 'company'
      });
      $scope.gridOptions.columnDefs.push({
     field: 'employed'
      });

      alert("added new columns");
      $scope.gridOptions.data = data1;

     /* for(var i=0; i<$scope.gridOptions.data.length; i++){
        $scope.gridOptions.data[i].firstName = data1[i].firstName;
        $scope.gridOptions.data[i].lastName = data1[i].lastName;
        $scope.gridOptions.data[i].company = data1[i].company;
        $scope.gridOptions.data[i].employed = data1[i].employed;
      } */


      $scope.gridApi.grid.refresh();
  };

if you want to remove the old columns, you would use

$scope.gridOptions.columnDefs = new Array();

and then refresh data using:

$scope.gridOptions.data = data1;

$scope.gridApi.grid.refresh();

edited Jun 14, 2016 at 3:11

answered Jun 13, 2016 at 12:36

Python Basketball

2,3803 gold badges27 silver badges47 bronze badges

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

3 Comments

NewBuddy Over a year ago

thanks for the update. but, i want to remove old columns and data once i click on rebind button action. Can you help me on this please?

Python Basketball Over a year ago

i have updated the plunker and the above code, you can use $scope.gridOptions.columnDefs = new Array(); and then use $scope.gridOptions.data = data1;

NewBuddy Over a year ago

thank you Vino; it solved my problem of re-assigning / re-binding columns dynamically.

Collectives™ on Stack Overflow

angularjs UI grid - assign columns and data dynamically

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related