CODEWITHSUNDEEP
javascriptag-grid
shek
shek

Reputation: 297

How to not reset filters after refresh button is clicked ag-grid

I am using ag-grid:

tutorial.js:

(function() {
var columnDefs = [
    {headerName: "Athlete", field: "athlete", width: 150, filter: 'set'},
    {headerName: "Age", field: "age", width: 90, cellRendered: timestampCellRenderer}

];

function timestampCellRenderer(params) {
    return params.value + ' <span style="font-size: 10px; color: grey;">' + new Date().getTime() + '</span>';
}


function onRefreshAll() {
    gridOptions.api.refreshView();
}
var gridOptions = {
    columnDefs: columnDefs,
    rowData: null,
    enableSorting: true,
    enableFilter: true,
    enableColResize: true
};


// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid1');
    new agGrid.Grid(gridDiv, gridOptions);

    // do http request to get our sample data - not using any framework to keep the example self contained.
    // you will probably use a framework like JQuery, Angular or something else to do your HTTP calls.
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', '../dist/olympicWinners.json');
    httpRequest.send();
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
            var httpResult = JSON.parse(httpRequest.responseText);
            gridOptions.api.setRowData(httpResult);
            gridOptions.api.sizeColumnsToFit();
            console.log(httpResult);
        }
    };
});
window.onRefreshAll = onRefreshAll;
})()

index.html:

<html>
<head>
    <!-- you don't need ignore=notused in your code, this is just here to trick the cache -->
    <script src="../dist/ag-grid-enterprise.js?ignore=notused31"></script>
    <script src="tutorial1.js"></script>
    <script src="tutorial.js"></script>

</head>
<body>
<div id="myGrid1" class="ag-fresh" style="height: 400px;"></div>
<div>
    <span style="padding-bottom: 4px; display: inline-block;">
        <button onclick="onRefreshAll()">Ireland & UK</button>


    </span>
    <br/>

</div>

<div id="myGrid" class="ag-fresh" style="height: 400px;"></div>

</body>
</html>

So, whenever the "Refresh" button is clicked, all the sorting that is done on a column is refreshed and reset. Is it possible that the sorting doesn't reset whenever the refresh button is clicked but only the data is updated and the filter remains?

Upvotes: 3

Views: 5198

Answers (2)

BiAiB
BiAiB

Reputation: 14122

you need to add these filterParams in your column defs:

  {
    headerName: 'athlete',
    field: 'athlete',
    editable: true,
    width: 100,
    filterParams: {apply: true, newRowsAction: 'keep'}
  },

Upvotes: 3

Jon Freedman
Jon Freedman

Reputation: 9697

I asked the AG-Grid team the same question, check out the delta-row-data mode.

Upvotes: 1

Related Questions