I've got a query tool I've been working on, which has an angular form that is filled out, and then when it's submitted it uses AJAX which returns JSON, which is then rendered into ui-grid, that JSON response looks like

{
"success": true,
"message": "",
"columns": ["first_name", "last_name", "pany", "employed"]
"results": [
    {first_name: "John", last_name: "Smith", pany: "Abc Inc", employed: true},
    {first_name: "Johnny", last_name: "Rocket", pany: "Abc Inc", employed: true}]
}

I'm working on both the PHP and angular so I have full control over this JSON response if need be. I'm running into an issue when my JSON response from a first AJAX call is rendered, and then I run another, seperate AJAX call on the same page and get a new data set: this new data set does not render any of the columns that were not in the original data set. This is hugely problematic as the table is essentially cleared when none of the columns are the same, and I often need to load pletely different data into ui-grid in this single page app.

When the JSON is recieved I simply bind the jsonResult.results to the old $scope.myData variable that ui-grid is bound to.

I've made a plunker isolating this issue. A dataset with a "punk" column is loaded, and then clicking "swap data" will try to load a dataset with "employee" column instead of "punk". I've so far looked into directives that will refresh or reload when the $scope.myData variable changes using $watch, and looked at finding something like $scope.columnDefs to let ui-grid know. Relatively new to angular and javascript so directives are still a bit over my head.

I've got a query tool I've been working on, which has an angular form that is filled out, and then when it's submitted it uses AJAX which returns JSON, which is then rendered into ui-grid, that JSON response looks like

{
"success": true,
"message": "",
"columns": ["first_name", "last_name", "pany", "employed"]
"results": [
    {first_name: "John", last_name: "Smith", pany: "Abc Inc", employed: true},
    {first_name: "Johnny", last_name: "Rocket", pany: "Abc Inc", employed: true}]
}

I'm working on both the PHP and angular so I have full control over this JSON response if need be. I'm running into an issue when my JSON response from a first AJAX call is rendered, and then I run another, seperate AJAX call on the same page and get a new data set: this new data set does not render any of the columns that were not in the original data set. This is hugely problematic as the table is essentially cleared when none of the columns are the same, and I often need to load pletely different data into ui-grid in this single page app.

When the JSON is recieved I simply bind the jsonResult.results to the old $scope.myData variable that ui-grid is bound to.

I've made a plunker isolating this issue. A dataset with a "punk" column is loaded, and then clicking "swap data" will try to load a dataset with "employee" column instead of "punk". I've so far looked into directives that will refresh or reload when the $scope.myData variable changes using $watch, and looked at finding something like $scope.columnDefs to let ui-grid know. Relatively new to angular and javascript so directives are still a bit over my head.

• javascript
• ajax
• angularjs
• angular-ui
• angular-ui-grid

3 Answers 3

I have updated your plunker slightly:

$scope.swapData = function() {
  if ($scope.gridOpts.data === data1) {
    $scope.gridOpts.columnDefs = [
      { name:'firstName' },
      { name:'lastName' },
      { name:'pany' },
      { name:'employee' }
    ];
    $scope.gridOpts.data = data2;
    //punk column changes to employee
  }
  else {
    $scope.gridOpts.columnDefs = [
      { name:'firstName' },
      { name:'lastName' },
      { name:'pany' },
      { name:'punk' }
    ];
    $scope.gridOpts.data = data1;
    //employee column changes to punk
  }
};

http://plnkr.co/edit/OFt86knctJxcbtf2MwYI?p=preview

Since you have the columns in your json, it should be fairly easy to do.

One additional piece that I figured out with the help of Kevin Sage's answer and the plunker example... If you are using the backward-patible "field" attribute the swapping does not work properly when there are field name overlaps between the two sets of column definitions. The column headers and the column widths are not rendered properly in this case. Using the "name" attribute of the column definition corrects this.

    $scope.swapData = function() {
  if ($scope.gridOpts.data === data1) {
    $scope.gridOpts.columnDefs = [
      { field:'firstName' },
      { field:'lastName' },
      { field:'pany' },
      { field:'employee' }
    ];
    $scope.gridOpts.data = data2;
    //punk column changes to employee
  }
  else {
    $scope.gridOpts.columnDefs = [
      { field:'firstName' },
      { field:'lastName' },
      { field:'pany' },
      { field:'punk' }
    ];
    $scope.gridOpts.data = data1;
    //employee column changes to punk
  }
};

Example here: Plunker

My solution:

$http.get('url').success(function(res) {
// clear data
gridOptions.data.length = 0;
// update data in next digest 
$timeout(function() {
gridOptions.data = res;
});
});