import { GridOptions , IDetailCellRendererParams , IServerSideDatasource } from '@ag-grid-community/core' ; declare var FakeServer ; const gridOptions = { columnDefs : [ { field : 'accountId' , maxWidth : 200 , cellRenderer : 'agGroupCellRenderer' } , { field : 'name' } , { field : 'country' } , { field : 'calls' } , { field : 'totalDuration' } , ] , defaultColDef : { flex : 1 , } , animateRows : true , rowModelType : 'serverSide' , serverSideStoreType : 'partial' , masterDetail : true , detailRowAutoHeight : true , detailCellRendererParams : { detailGridOptions : { columnDefs : [ { field : 'callId' } , { field : 'direction' } , { field : 'duration' , valueFormatter : "x.toLocaleString() + 's'" } , { field : 'switchCode' } , { field : 'number' } , ] , defaultColDef : { flex : 1 , } , } , getDetailRowData : function ( params ) { params . successCallback ( params . data . callRecords ) ; } , } as IDetailCellRendererParams , onGridReady : function ( params ) { setTimeout ( function ( ) { var someRow = params . api . getRowNode ( '1' ) ; if ( someRow ) { someRow . setExpanded ( true ) ; } } , 1000 ) ; } , } ; function getServerSideDatasource ( server ) { return { getRows : function ( params ) { console . log ( '[Datasource] - rows requested by grid: ' , params . request ) ; var response = server . getData ( params . request ) ; setTimeout ( function ( ) { if ( response . success ) { params . success ( { rowData : response . rows , rowCount : response . lastRow } ) ; } else { params . fail ( ) ; } } , 200 ) ; } , } ; } document . addEventListener ( 'DOMContentLoaded' , function ( ) { var gridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( gridDiv , gridOptions ) ; fetch ( 'https://www.ag-grid.com/example-assets/call-data.json' ) . then ( response => response . json ( ) ) . then ( function ( data ) { var fakeServer = new FakeServer ( data ) ; var datasource = getServerSideDatasource ( fakeServer ) ; gridOptions . api ! . setServerSideDatasource ( datasource ) ; } ) ; } ) ;