ag-grid data for detailCellRendererParams not displaying - ag-grid

Question

I'm trying to add a nested grid inside an existing grid. I'm very new at this, and although I'm able to display the grid, I cannot seem to display the data. When I do console.log(params), I have all my data, but no matter what I try, I cannot display the data. I think the problem is with my getDetailRowData, and what I'm passing to the successCallback function. Any ideas?
this is my component ts file
import { Component, OnInit } from '#angular/core';
import { ReportService } from 'src/app/services/report.service';
import { Report } from 'src/app/models/report';
import { agThemeSgBootstrap } from "#sg-bootstrap/ag-grid";
import {GridOptions, Module} from 'ag-grid-community';
import { DatePipe } from '#angular/common';
#Component({
selector: 'app-report',
templateUrl: './report.component.html',
styleUrls: ['./report.component.scss']
})
export class ReportComponent implements OnInit {
apiUrl: any;
reports : Report[];
gridOptions: GridOptions;
dateValue = new Date();
maxDate = new Date();
private detailCellRendererParams;
private columnDefs;
// public modules: Module[] = AllModules;
constructor(private reportService : ReportService, private datePipe: DatePipe) {
this.columnDefs = [
{headerName: 'Report Name', field: 'reportName', cellRenderer: 'agGroupCellRenderer',
resizable: true,
valueGetter: params => { return `${params.data.reportName}.dat` }},
{headerName: 'Sent to FIS', field: 'sentToFis',resizable: false,
valueGetter: params => { return params.data.sentToFis === true ? "Yes" : "No" } },
{headerName: 'File Size', field: 'contentLength', resizable: true,
valueGetter: params => { return `${this.formatBytes(params.data.contentLength)}` }},
{headerName: 'Last Modified', field: 'lastModified', resizable: true,
valueGetter: params => { return this.datePipe.transform(params.data.lastModified, "yyyy-MM-dd HH:mm:ss") }},
];
this.detailCellRendererParams = {
detailGridOptions: {
columnDefs: [
{headerName: 'ADSL Path', field: 'adslPath', resizable: true,
valueGetter: params => { return params.data.adlsFullPath}},
{headerName: 'Version', field: 'version', resizable: true,
valueGetter: params => { return params.data.sentToFis}},
{headerName: 'Source', field: 'source', resizable: true,
valueGetter: params => { return params.data.adlsFullPath}},
],
},
getDetailRowData: function(params) {
params.successCallback(params.data.children);
console.log(params.data);
}
}
}
ngOnInit() {
this.callReportService(new Date())
}
reportDateChange(value: Date) {
let currentValue = this.datePipe.transform(this.dateValue, "yyyyMMdd")
let newSelectedValue = this.datePipe.transform(value, "yyyyMMdd")
if (currentValue != newSelectedValue) {
if (this.gridOptions.api) {
this.gridOptions.api.showLoadingOverlay();
}
this.callReportService(value)
this.dateValue = value;
}
}
callReportService(value: Date) {
this.reportService.getReportsForDate(value).subscribe(x=> {
this.reports = x;
this.gridOptions.api.sizeColumnsToFit();
})
}
ngAfterContentInit() {
let agOpt = { ...{
animateRows: true,
enableRangeSelection: true,
defaultColDef: {
editable: false,
enableValue: false,
enableRowGroup: false,
enablePivot: true,
filter: true,
sortable: true
},
statusBar: {
statusPanels: [{
statusPanel: 'agTotalRowCountComponent',
align: 'left'
},
{
statusPanel: 'agFilteredRowCountComponent'
},
{
statusPanel: 'agSelectedRowCountComponent'
},
{
statusPanel: 'agAggregationComponent'
},
],
}
}, ...agThemeSgBootstrap }
this.gridOptions = { ...this.gridOptions, ...agOpt }
}
onGridReady(params) {
params.api.setDomLayout("autoHeight");
params.api.sizeColumnsToFit();
}
onGridSizeChanged(params) {
params.api.sizeColumnsToFit();
}
ngAfterViewInit() {
this.dateValue = new Date()
}
formatBytes(bytes, decimals = 2) {
if (bytes === 0) return '0 Bytes';
const k = 1024;
const dm = decimals < 0 ? 0 : decimals;
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}
}
my html file
<div class="container-fluid">
<div class="col-xs-12 col-12 col-md-3 form-group row">
<label for="reportDate" class="col-form-label">Report Date:</label>
<div class="col-sm-4 col-md-7">
<input id="reportDate"
class="form-control"
#dp="bsDatepicker"
(bsValueChange)="reportDateChange($event)"
[maxDate]="maxDate"
bsDatepicker
[bsValue]="dateValue" [bsConfig]="{ isAnimated: true, adaptivePosition: true, dateInputFormat: 'YYYY-MM-DD', containerClass: 'theme-red' }"/>
</div>
</div>
<div class="row">
<div class="col">
<ag-grid-angular
style="width: 100%; height: 300px;"
class="ag-theme-sg-bootstrap"
[gridOptions]="gridOptions"
[masterDetail]="true"
[detailCellRendererParams]="detailCellRendererParams"
[rowData]="reports"
[columnDefs]="columnDefs"
(gridReady)="onGridReady($event)"
(gridSizeChanged)="onGridSizeChanged($event)">
</ag-grid-angular>
</div>
</div>
</div>