ag-grid not showing any data

Issue

I am using ag-grid with angularjs. so in controller I am populating rows of grid with the sql DB source. For this I am making webapi call which returns array of object. Following is the code.

var module = angular.module("crud", ["agGrid"]);

module.controller("crudCtrl", function ($scope, $http) {
var columnDefs = [
   { headerName: "Roll No", field: "RollNo", editable: true },
   { headerName: "Name", field: "Name", editable: true },
   { headerName: "Place", field: "PlaceName", editable: true },
   { headerName: "Birth Date", field: "dob", editable: true }
];


$scope.gridOptions = {
    columnDefs: columnDefs,
    rowData: [],
    headerHeight: 42,
    rowHeight: 32

};

$http.get("api/Student/GetAllStudents").then(function (response) {
    $scope.gridOptions.rowData = response.data;

}, function (error) {
    console.log('Oops! Something went wrong while saving the data.')
});


});

but when I run the page it is not showing any data. When I debug and see it returns records in response.data as an array of object as array[12]. but it is not showing the same in grid. If instead of response.data I assign my own array similar to what response returns, then it renders the data. So, where is the issue?

Solution

We had a similar problem. You may need to use gridOptions.onGridReady

        onGridReady: () => {
            //setup first yourColumnDefs and yourGridData

            //now use the api to set the columnDefs and rowData
            this.gridOptions.api.setColumnDefs(yourColumnDefs);
            this.gridOptions.api.setRowData(yourGridData);
        },

Answered By - S. Tailor