How to refresh ng-grid when griddata has different number of columns from previous displayed griddata
I do have an application where user selects an option to get grid data from server side and depend upon what option user selects, the number of columns in grid data may vary. I am using Angularjs and ng-grid to display data. The first time, it works fine and it does display correct number of columns (e.g 2 columns). but when user selects other option, which gets 3 columns grid-data, ng-grid still thinks of old columns information and tries to map second 3-cols grid-data in old 2 columns. Since columns info is not available, I cannot use columnDefs in controller. How can I refresh ng-grid columns.
Note: I tried to put code at jsFiddle (http://jsfiddle.net/User888/pwUeX/11/), but somehow, I am not able to run it. My complete code is here.
Also: How can I display row# in ng-grid without sending it from server.
My HTML file:
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>test </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.io/ng-grid/lib/ng-grid.js"></script>
<script type="text/javascript" src="gridExample.js"></script>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.io/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body ng-controller="GridExampleCtrl">
<div>
Grid Selection:
<select ng-model="gridSelectedId">
<option ng-repeat="gridSel in gridSels" value="{{gridSel.GridSelId}}">{{gridSel.GridSelName}}</option>
</select>
<br/>User selected: {{gridSelectedId}} <br><hr>
<div>
<button ng-click="display()">Display</button><hr>
<div class="gridStyle" ng-grid="gridOptions"></div>
</div>
</div>
</body>
</html>
My Controller is:
var app = angular.module('myApp', ['ngGrid']);
app.controller('GridExampleCtrl', function ($scope, $http, $timeout) {
$scope.myData = [];
$scope.grid1 = [{name: "grid1a", age: 50},
{name: "grid1b", age: 43},
{name: "grid1c", age: 50},
{name: "grid1d", age: 29},
{name: "grid1e", age: 34}];
$scope.grid2 = [{lastname: "grid2a", age: 50, state:'Idaho'},
{lastname: "grid2b", age: 43, state:'NewYork'},
{lastname: "grid2c", age: 50, state:'California'},
{lastname: "grid2d", age: 29, state:'Arizona'},
{lastname: "grid2e", age: 34, state:'Utah'}];
$scope.gridSels = [
{GridSelId : 1, GridSelName : 'Grid 1' },
{GridSelId : 2, GridSelName : 'Grid 2' }
]
$scope.gridOptions = {
data: 'myData',
enableColumnResize: true,
showGroupPanel: true,
//pagingOptions: $scope.pagingOptions
};
$scope.display = function(){
console.log("User selected grid : " + $scope.gridSelectedId);
if ($scope.gridSelectedId == 1) {
$scope.myData = $scope.grid1;
} else {
$scope.myData = $scope.grid2;
}
};
});
and css looks like:
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 800px;
height: 400px;
}
Answer
You could also call a method that is supplied in the source code. This may not have been available at the time of the question but I ran into the issue myself. If you're able to target the grid itself you can use something similar to this piece of code
scope.gridOptions.ngGrid.buildColumns();
buildColumns() is the major function and you need to redefine the columnDefs array as brentiumbrent mentioned