Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
40
AngularJS Updating DataSource
posted

Hi,

I'm trying to figure out how to refresh the grid after assigning new data to DataSource but can't seem to figure it out.

For example:

$scope.gridData = [{"ID": 1, "Name": "Davolio"},{"ID": 2, "Name": "Fuller"}];

$scope.gridOptions = {dataSource: $scope.gridData, primaryKey: "ID"};

And the grid displays everything correctly. But now I want to change the DataSource to something completely different.

Attempt 1, assigning new data to $scope.gridData:

$scope.gridData = [{"Color": 'Blue', "Number": 9},{"Color": 'White', "Number": 7}];

Attemp 2, change DataSource using grid's API:

$("#grid1").igGrid("option", "dataSource", [{"Color": 'Blue', "Number": 9},{"Color": 'White', "Number": 7}]);

None of those methods update the grid to show it's new dataSource. Any help? Thanks.

Parents
  • 15320
    Verified Answer
    Offline posted

    Hello John,

    How are you trying to change the data source? If you're trying to assign the new data source "over" the old one this won't work. You need to destroy the grid and initialize it again with the new data, for example this could be achieved through button click:

     <script type="text/javascript">
      
      function gridConfig(gridID, data){
       $(gridID).igGrid({
        dataSource: data
       });
      }
      
      app.controller('gridController', ['$scope','data1', function ($scope, data1) {
      $scope.data1 = data1.data;
      //$scope.gridOptions = {dataSource: $scope.data1, primaryKey: "ID"};
      $scope.changeDS = function () {
       $("#grid1").igGrid("destroy");
       var data2 = [{"Color": 'Blue', "Number": 9},{"Color": 'White', "Number": 7}];
       gridConfig("#grid1", data2);
      }
    }]);

     </script>

     <div ng-controller="gridController"> 
      <ig-grid id="grid1"
         data-source="data1"
         width="800px"
         primary-key="ID"
         auto-generate-columns="true"
         >
      </ig-grid>
       <button ng-click="changeDS()">Change DS</button>
      <!-- <div ig-grid="gridOptions" id="grid"></div> -->
     </div>

    I'm attaching also a sample for your reference. If you have any further questions, please let me know.

    Regards,

    Tsanna

    changeDS.zip
Reply Children
No Data