ui-grid Data display issue - angularjs

Question

I'm using ui-grid with my Cordova application. When I try to populate the ui-grid, sometimes data is displayed on the left like in the picture below:
Any help?
HTML
<div ui-grid="{data: gridOptions, columnDefs: gridColumns, paginationPageSize: 10, enableColumnMenus: false, enableHorizontalScrollbar : 0,
enableVerticalScrollbar : 0}" ui-grid-auto-resize ui-grid-pagination class="grid_transmiss"> </div>
JS
$scope.gridColumns = [{
field: 'ref',
displayName: 'Référence'
}, {
field: 'Emq',
displayName: 'Nombre de plots empilés'
}, {
field: 'charge',
displayName: 'Charge nominale (daN)'
}, {
field: 'fp',
displayName: 'Fréquence propre(Hz)'
}, {
field: 'attenuation',
displayName: 'Atténuation(%)'
}, {
field: 'flechereel',
displayName: 'Flèche réelle statique (mm)'
}, {
name: 'Courbe',
displayName: 'Courbe',
cellTemplate: '<i ng-click="grid.appScope.goToChart()"><img src="img/chart.png" style="width=20px;height:20px" alt="Voir courbe" /></i>'
}];

Answer 1

Try defining your grid in your controller like this:
$scope.gridOptions = {
columnDefs: [
{
field: 'ref', displayName: 'Référence', width: "*"
},
{
field: 'Emq', displayName: 'Nombre de plots empilés', width: "*"
},
{
field: 'charge', width: 110, displayName: 'Charge nominale (daN)'
},
{ field: 'fp', displayName: 'Fréquence propre(Hz)', width: "*"
},
{
field: 'attenuation', displayName: 'Atténuation(%)', width: "*"
},
{
field: 'flechereel', displayName: 'Flèche réelle statique (mm', width: "*"
},
{
field: 'Courbe', displayName: 'Release Courbe', width: "*",
cellTemplate: '<i ng-click="grid.appScope.goToChart()"><img src="img/chart.png" style="width=20px;height:20px" alt="Voir courbe" /></i>'
},
],
showGridFooter: true,
enableFiltering: true,
enableSorting: false,
enableColumnMenus: false,
paginationPageSizes: [100, 120, 140],
paginationPageSize: 100,
enableHorizontalScrollbar: uiGridConstants.scrollbars.NEVER,
enableGridMenu: false,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
}
};
Then in your HTML:
<div ui-grid="gridOptions" class="grid" ui-grid-pagination ui-grid-exporter ui-grid-auto-resize></div>
Also, make sure you include 'uiGridConstants' in our controller definition like so:
ContractorCtrl.$inject = ['$scope', '$interval', '$window', '$filter', 'uiGridConstants', '$q', '$timeout'];
function ContractorCtrl($scope, $interval, $window, $filter, uiGridConstants, $q, $timeout)
Let me know if this solves your issue.

Answer 2

change your column definition according to below format. It will work.
$scope.gridOptions = {
columnDefs: [
{name:'clumnName', fields: 'DisplayValue', width: '20%'},
{name:'clumnName', fields: 'DisplayValue', width: '20%'},
{name:'clumnName', fields: 'DisplayValue', width: '20%'},
],
data: $scope.DisplayDataSet,
}