Angular Ui Grid Import Data

I am new to Angular Ui Grid. I currently have a grid that supports export and import for csv files, but having an issue with the import feature.

I have a preset data mocking information coming from database. which would give me something like this example below

Grid Example

I try to import new data shown below

New Grid with different columns

To be more clear. I want to add the new data (second picture) to the grid in the first picture, but completely remove the information (data and columns) from the grid in the first picture.

In other words i want the imported data to overwrite the previous data found in the same grid.

Solution

From question it is unclear how you bind data to grid? ui-grid="{ data: myData }" like this only?

If your data format and column definations are differnt then you need to setup them explicitly like this,

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

app.controller('MainCtrl', ['$scope', function ($scope) {

gridOptions1 = {
        enableSorting: true,
        columnDefs: [
          { name:'firstName', field: 'first-name' },
          { name:'1stFriend', field: 'friends[0]' },
          { name:'city', field: 'address.city'},
          { name:'getZip', field: 'getZip()', enableCellEdit:false}
        ],
        data : [      {
                           "first-name": "Cox",
                           "friends": ["friend0"],
                           "address": {street:"301 Dove Ave", city:"Laurel", zip:"39565"},
                           "getZip" : function() {return this.address.zip;}
                       }
                   ]
      };
  
gridOptions2 = {
        enableSorting: true,
        columnDefs: [
          { name:'firstName1', field: 'first-name1' },
          { name:'1stFriend1', field: 'friends1[0]' },
          { name:'city1', field: 'address1.city'}
        ],
        data : [      {
                           "first-name1": "Cox1",
                           "friends1": ["friend1"],
                           "address1": {street:"301 Dove Ave1", city:"Laurel1", zip:"395651"}
                       }
                   ]
      };
  
  $scope.gridOptions = gridOptions1;

  $scope.changeBinding = function(){
    
      $scope.gridOptions = gridOptions2;
  }
}]);

.grid {
  width: 500px;
  height: 250px;
}

<!doctype html>
<html ng-app="app">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
  <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
  <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
  <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
  <script src="http://ui-grid.info/release/ui-grid.js"></script>
  <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">  
</head>

<body>

  <div ng-controller="MainCtrl">
    <div id="grid1" ui-grid="gridOptions" ui-grid-edit class="grid"></div>
    <button ng-click="changeBinding()">Change</button>
  </div>

</body>

</html>

I have used same example given in ui-grid documentaion

Update: Changed to have gridoptions dynamic. If data content from obj[0] and obj[1] are correct then you must able to switch grid data and options.