UI Grid column defs get overridden - angularjs

Question

On populating the UI Grid, the UI Grid column defs get overridden when the data has more fields. How to solve this? Where and how to solve this, in the controller, in the WEB Api ?
For simplicity no filtering in the sample is put:
<!-- View -->
<style>
.myGrid { height: 300px; width: 1000px; border: 1px solid black;}
</style>
<div id="grid1" ui-grid="grid1Options"
class="myGrid" ui-grid-resize-columns ui-grid-move-column ui-grid-pinning
ui-grid-edit ui-grid-cellNav ui-grid-selection ui-grid-save-state>
</div>
//Controller
(function () {
'use strict';
angular
.module('pdb').controller('suppliersController_',
['$scope', '$http', 'uiGridConstants', '$resource', 'suppliersFactory_',
fSuppliersController_]);
function fSuppliersController_($scope, $http, uiGridConstants, $resource, suppliersFactory_)
{
$scope.grid1Options = {
enableSorting: true, enableFiltering: false, showGridFooter: false,
showColumnFooter: false, enableColumnResizing: true, enableColumnMoving: true,
enableCellEditOnFocus: true, enableRowSelection: true, enableSelectAll: true,
selectionRowHeaderWidth: 35,
columndefs: [
{ name: 'Name_Supplier', width: '40%', displayName: 'Supplier', field: 'Name_Supplier' },
{ name: 'Contact', width: '60%', displayName: 'Contact', field: 'Contact' }
]};
(new suppliersFactory_())
.$getAll()
.then(function (result) { $scope.grid1Options.data = result.value; });
}
})();
// Factory
(function () {
'use strict';
angular.module('pdb').factory('suppliersFactory_',
['$resource', fSuppliersFactory_]);
function fSuppliersFactory_($resource) {
return $resource("", {}, { 'getAll': { method: "GET", url: "odata/Suppliers" } });
}
})();
// Web API returns more fields..
public class SuppliersController : ODataController
{
private PDBEntities db = new PDBEntities();
// GET: odata/Suppliers
[EnableQuery]
public IQueryable<tblSupplier> GetSuppliers() { return db.tblSuppliers; }
}

Answer 1

https://github.com/angular-ui/ui-grid/commit/fd154a71f6a7407bce577efebde9f1122274c48b
Make sure you have grid.lateBoundColumns set to false.
This is an old issue, make sure you have a recent version of ng-grid.
From the author:
I see what the issue is,
There is no data and no column definitions initially , so the grid
goes into a "waiting" state and has a flag set to automatically
generate the columns, then, even when you set the column definitions,
they get auto-generated when the data hits. I added a fix for it in
commit
https://github.com/angular-ui/ui-grid/issues/285
http://jsfiddle.net/ShEB4/9/