import { AsyncTransactionsFlushed , ColDef , GridApi , GridOptions , IsApplyServerSideTransactionParams , IServerSideDatasource , ServerSideTransaction , ServerSideTransactionResult , ServerSideTransactionResultStatus , ValueFormatterParams } from '@ag-grid-community/core' ; declare var FakeServer ; var fakeServer = new FakeServer ( ) ; const columnDefs = [ { field : 'productName' , rowGroup : true , hide : true } , { field : 'portfolioName' , rowGroup : true , hide : true } , { field : 'bookId' , rowGroup : true , hide : true } , { headerName : 'Current' , field : 'current' , width : 200 , type : 'numericColumn' , valueFormatter : numberCellFormatter , cellRenderer : 'agAnimateShowChangeCellRenderer' , } , { headerName : 'Previous' , field : 'previous' , width : 200 , type : 'numericColumn' , valueFormatter : numberCellFormatter , cellRenderer : 'agAnimateShowChangeCellRenderer' , } , { headerName : 'Deal Type' , field : 'dealType' , filter : 'agSetColumnFilter' , filterParams : { values : [ 'Financial' , 'Physical' ] , } , } , { headerName : 'Bid' , field : 'bidFlag' , width : 100 , filter : 'agSetColumnFilter' , filterParams : { values : [ 'Buy' , 'Sell' ] , } , } , { headerName : 'PL 1' , field : 'pl1' , width : 200 , type : 'numericColumn' , valueFormatter : numberCellFormatter , cellRenderer : 'agAnimateShowChangeCellRenderer' , } , { headerName : 'PL 2' , field : 'pl2' , width : 200 , type : 'numericColumn' , valueFormatter : numberCellFormatter , cellRenderer : 'agAnimateShowChangeCellRenderer' , } , { headerName : 'Gain-DX' , field : 'gainDx' , width : 200 , type : 'numericColumn' , valueFormatter : numberCellFormatter , cellRenderer : 'agAnimateShowChangeCellRenderer' , } , { headerName : 'SX / PX' , field : 'sxPx' , width : 200 , type : 'numericColumn' , valueFormatter : numberCellFormatter , cellRenderer : 'agAnimateShowChangeCellRenderer' , } , { headerName : '99 Out' , field : '_99Out' , width : 200 , type : 'numericColumn' , valueFormatter : numberCellFormatter , cellRenderer : 'agAnimateShowChangeCellRenderer' , } , { headerName : 'Submitter ID' , field : 'submitterID' , width : 200 , type : 'numericColumn' , valueFormatter : numberCellFormatter , cellRenderer : 'agAnimateShowChangeCellRenderer' , } , { headerName : 'Submitted Deal ID' , field : 'submitterDealID' , width : 200 , type : 'numericColumn' , valueFormatter : numberCellFormatter , cellRenderer : 'agAnimateShowChangeCellRenderer' , } , ] ; const gridOptions = { asyncTransactionWaitMillis : 500 , purgeClosedRowNodes : true , rowSelection : 'multiple' , serverSideStoreType : 'full' , columnDefs : columnDefs , rowModelType : 'serverSide' , animateRows : true , defaultColDef : { width : 250 , resizable : true , sortable : true , } , autoGroupColumnDef : { field : 'tradeId' , } , getRowNodeId : getRowNodeId , isApplyServerSideTransaction : isApplyServerSideTransaction , onAsyncTransactionsFlushed : onAsyncTransactionsFlushed , onGridReady : function ( params ) { var dataSource = { getRows : function ( params2 ) { fakeServer . getData ( params2 . request , params2 . parentNode . data , function ( result , serverVersion ) { params2 . success ( { rowData : result , storeInfo : { serverVersion : serverVersion } , } ) ; } ) ; } , } ; params . api . setServerSideDatasource ( dataSource ) ; var callback = processUpdateFromFakeServer . bind ( window , params . api ) ; fakeServer . addUpdateListener ( callback ) ; } , } ; function getRowNodeId ( data ) { if ( data . tradeId ) { return data . tradeId ; } else if ( data . bookId ) { return data . bookId ; } else if ( data . portfolioId ) { return data . portfolioId ; } else if ( data . productId ) { return data . productId ; } } function isApplyServerSideTransaction ( params ) { var transactionVersion = ( params . transaction as any ) . serverVersion ; var dataLoadedVersion = params . storeInfo . serverVersion ; var transactionCreatedSinceInitialLoad = transactionVersion > dataLoadedVersion ; if ( ! transactionCreatedSinceInitialLoad ) { console . log ( 'cancelling transaction' ) ; } return transactionCreatedSinceInitialLoad ; } function onAsyncTransactionsFlushed ( e ) { var summary = { } ; ( e . results as ServerSideTransactionResult [ ] ) . forEach ( ( result ) => { var status = result . status ; if ( summary [ status ] == null ) { summary [ status ] = 0 ; } summary [ status ] ++ ; } ) ; console . log ( 'onAsyncTransactionsFlushed: ' + JSON . stringify ( summary ) ) ; } function numberCellFormatter ( params ) { return Math . floor ( params . value ) . toString ( ) . replace ( /(\d)(?=(\d{3})+(?!\d))/g , '$1,' ) ; } function onBtStart ( ) { fakeServer . startUpdates ( ) ; } function onBtStop ( ) { fakeServer . stopUpdates ( ) ; } function onBtApplyOneTransaction ( ) { fakeServer . insertOneRecord ( ) ; } function processUpdateFromFakeServer ( gridApi , transactions ) { var updatingJustOneTransaction = transactions . length == 4 ; if ( updatingJustOneTransaction ) { console . log ( 'Updating One Record' ) ; } transactions . forEach ( function ( tx ) { gridApi . applyServerSideTransactionAsync ( tx , function ( res ) { if ( updatingJustOneTransaction ) { console . log ( 'Route [' + ( tx . route || [ ] ) . join ( ',' ) + '], status = ' + res . status ) ; } } ) ; } ) ; } document . addEventListener ( 'DOMContentLoaded' , function ( ) { var gridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( gridDiv , gridOptions ) ; } ) ;