Erik Ásland Erik Ásland - 8 days ago 6
AngularJS Question

Awkward spacing when setting multiple columns using setColumnDefs() in ag-grid in Angular 1.4

I have the following Angular ag-grid code...

qrymonapp.controller("bqQueryReportController", function($scope, $route, $routeParams, $http){
$scope.gridOptions = {
enableSorting: true,
enableFilter: true,
suppressMovableColumns:true,
enableColResize: true,
rowHeight : 27,
tooltipField : true,
suppressLoadingOverlay : true,
}

$http.get("url").then(function (response) {
$scope.gridOptions.api.setColumnDefs([{headerName: "stone1", field: "stone"}, {headerName: "stone2", field: "stone2"}])
$scope.gridOptions.api.setRowData([{stone: "garnett"},{stone2: "pearl"}}])
});
});


Here is my html...

<div class="query-report-ag-grid">
<div ag-grid="gridOptions" class="ag-fresh" style="height: 100%;"></div>
</div>


Here is what my grid looks like...

enter image description here

Notice the weird blank space? I need the grid to have no fillers/whitespace. How do I do this?

Answer

The problem is with how you are setting your data. The data you are giving to the grid is (formatted for clarity)

[
  {
    stone: "garnett"
  },
  {
    stone2: "pearl"
  }
]

This is an array of two objects which is why you are seeing two rows. Each object only has one key that matches a column definition so only one cell will be filled. In order for a row to display a value in each column you need to define an object that has keys that match all the column definitions.

In this case

[
  {
    stone: "garnett",
    stone2: "pearl"
  }
]

or just [{stone: "garnett",stone2: "pearl"}]