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.
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>
<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
alright got it, thanks! :)
Is this (destroy then initialize) something that should be done with all the controls (igTree, igCombo... etc) when changing the data source?
There is also another approach for changing the data source in the igGrid at runtime. You can use 'renderMultiColumnHeader' option: http://www.igniteui.com/help/api/2014.2/ui.iggrid#methods:renderMultiColumnHeader and define the new columns schema, then assign the new data source using dataSource option. Please note that this is only applicable for grid scenarios. If you have further questions, feel free to contact me.