angular ui grid rebind data with new columns

Question

This issue is very similar to this below issue: Angular js UI grid is not getting updated with new content

but, what is my problem is, on rebind, i am using different data and columns. So when i do that on button click, the grid is not refreshed.

please check this sample : http://plnkr.co/edit/NIlEiAoZbt7ZcnXDPqrb

$scope.myfunc = function() {

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

       $scope.gridOptions.columnDefs = [
    { field:'firstName' },
    { field:'lastName' },
    { field:'company' },
    { field:'employed' }
  ];
  $scope.gridOptions.data = data2;

}; on this event, only one column (which exists on both datasets are binding properly). -- NewBuddy

I have now a new problem. When i dynamically push the columns to the grid for each time i re-bind the data, the new columns are getting added and old columns are still remained to the grid but as empty cells. Can some body let me know how to remove/ still show original columns only?? — NewBuddy

Maverick Maverick · Accepted Answer · 2016-05-25T10:34:50

I can't see data2 in your plunk and its giving error. Although, the below code should solve your problem.

$scope.gridOptions.onRegisterApi= function(gridApi) {
            $scope.gridApi = gridApi;                
};

on change of data/columns call the below function:

$scope.gridApi.grid.refresh();

angular ui grid rebind data with new columns

1 Answers