Ag Grid Export to Excel for Server side pagination row model

Viewed 1987

I am not able to find any helpful detail in ag-grid documentation regarding export data for server side row model. It seems to support the export of data that is already loaded.

Is their any way we can do excel export for complete data I am using Ag Grid - 23.1.1 Angular - 9.1.0

2 Answers

Yes, AgGrid only exports data that is loaded on the web client. You will need to either call a request with all the data possible (single page with all the elements) then call the exportAsExcel method on that.

This is a stretch since excel export for more than 4000 lines on the web client is a real pain that will render your browser completely unresponsive for some visible amount of time.

If you are looking for a huge datasheets export you could try to make it on the server side in an asynchronous way, agGrid can't help you that much here.

The answer in the comment above would be something like that

function exportAllRowsAsExcel() {
    var columnsHidden = [
        {headerName: '<?php echo ENTERPRISE_CODE; ?>', field: 'code'},
        {headerName: '<?php echo ENTERPRISE_NAME; ?>', field: 'name'},
        {headerName: '<?php echo TAX_NO; ?>', field: 'tax_no'},
        {headerName: '<?php echo Inditex; ?>', field: 'inditex',
            cellRenderer: function(event) {
                var inditex;
                if(event.data.inditex == 0) {
                    inditex = '<?php echo ABSENT; ?>';
                }
                else if(event.data.inditex == 1) {
                    inditex = '<?php echo EXISTS; ?>';
                }
                return inditex;
            },
            valueFormatter: (data) => {
                var inditex;
                if(data.value == 0) {
                    inditex = '<?php echo ABSENT; ?>';
                }
                else if(data.value == 1) {
                    inditex = '<?php echo EXISTS; ?>';
                }
                return inditex;
            },
        },
        {headerName: '<?php echo EcoVero; ?>', field: 'ecoVero',
            cellRenderer: function(event) {
                var ecoVero;
                if(event.data.ecoVero == 0) {
                    ecoVero = '<?php echo ABSENT; ?>';
                }
                else if(event.data.ecoVero == 1) {
                    ecoVero = '<?php echo EXISTS; ?>';
                }
                return ecoVero;
            },
            valueFormatter: (data) => {
                var ecoVero;
                if(data.value == 0) {
                    ecoVero = '<?php echo ABSENT; ?>';
                }
                else if(data.value == 1) {
                    ecoVero = '<?php echo EXISTS; ?>';
                }
                return ecoVero;
            },
        },
        {headerName: '<?php echo JoinLife; ?>', field: 'joinLife',
            cellRenderer: function(event) {
                var joinLife;
                if(event.data.joinLife == 0) {
                    joinLife = '<?php echo ABSENT; ?>';
                }
                else if(event.data.joinLife == 1) {
                    joinLife = '<?php echo EXISTS; ?>';
                }
                return joinLife;
            },
            valueFormatter: (data) => {
                var joinLife;
                if(data.value == 0) {
                    joinLife = '<?php echo ABSENT; ?>';
                }
                else if(data.value == 1) {
                    joinLife = '<?php echo EXISTS; ?>';
                }
                return joinLife;
            },
        },
        {headerName: '<?php echo BCI; ?>', field: 'bci',
            cellRenderer: function(event) {
                var bci;
                if(event.data.bci == 0) {
                    bci = '<?php echo ABSENT; ?>';
                }
                else if(event.data.bci == 1) {
                    bci = '<?php echo EXISTS; ?>';
                }
                return bci;
            },
            valueFormatter: (data) => {
                var bci;
                if(data.value == 0) {
                    bci = '<?php echo ABSENT; ?>';
                }
                else if(data.value == 1) {
                    bci = '<?php echo EXISTS; ?>';
                }
                return bci;
            },
        },
        {
            headerName: '<?php echo CREATED_DATE; ?>', field: 'created_date',
            valueFormatter: function(data) {
                return ((data.value !== null && moment(data.value, 'YYYY-MM-DD',true).isValid()) && (data.value !== '0000-00-00')) ? moment(data.value).format('DD.MM.YYYY') : '';
            },
            cellRenderer: function (event) {
                var created_date = new Date(event.data.created_date);
                return moment(created_date).format('DD.MM.YYYY');
            },
        },
        {headerName: '<?php echo UPDATED_DATE; ?>', field: 'updated_date',
            valueFormatter: function(data) {
                return ((data.value !== null && moment(data.value, 'YYYY-MM-DD',true).isValid()) && (data.value !== '0000-00-00')) ? moment(data.value).format('DD.MM.YYYY') : '';
            },
            cellRenderer: function(event) {
                var updated_date = new Date(event.data.updated_date);
                return moment(updated_date).format('DD.MM.YYYY');
            },
        },
    ];

    var gridOptionsHidden = {
        onGridReady: (e) => {

        },
        onDisplayedColumnsChanged: (e) => {

        },
        onColumnResized: (e) => {

        },
        onSortChanged: (e) => {

        },
        onRowDataChanged: function (params) {
            setTimeout(() => {
                gridOptions.api.exportDataAsExcel({
                    columnKeys: [
                        'code',
                        'name',
                        'tax_no',
                        'inditex',
                        'ecoVero',
                        'joinLife',
                        'bci',
                        'created_date',
                        'updated_date',
                    ],
                    processCellCallback: myCellCallback,
                })
            }, 1000);
        },
    }

//myAgGrid is just a function that calls grid (new agGrid.Grid...)
    App.myAgGrid(columnsHidden, gridOptionsHidden, {csrf_test_name: csrfTokenHash}, '/enterprises/enterprises_list_json', false, '#myGrid1');
}

Helper function

    function myCellCallback(params) {
    if (params.column.colId === 'inditex' || params.column.colId === 'ecoVero' || params.column.colId === 'joinLife' || params.column.colId === 'bci') {
        return (params.value > 0) ? '<?php echo EXISTS; ?>' : '<?php echo ABSENT; ?>';
    }
    else if (params.column.colId === 'created_date' || params.column.colId === 'updated_date') {
        return moment(params.value).format('DD.MM.YYYY');
    }
    else {
        return params.value;
    }
}

And do not forget the hidden div

<div class="m-content" hidden>
        <div class="row">
            <div class="col-xl-12" id="refreshContent1">
                <div id="myGrid1" class="ag-theme-balham" style="height: 100%;"></div>
            </div>
        </div>
    </div>

Tested, it works with server side row model.

Related