How to disable sorting on client after sorting on Server API?

Question

I have a DataGrid that when I click in a header column to sort(by Date for an example), it requests for my API that answer all the Data in the correct order. But after this, when Datagrid reload with the new Data, the Ag-Grid Component sort the column again, and it brings an incorrect order.

Is there a way to disable only the Sorting on Ag-Grid Component, but without disable the Header Sorting button(Because this button that sends the request to the API)?

Randall

Answer 1

Use a custom Comparator which does nothing. AG Grid, if no comparator is provided then uses alphabetical or numerical sort on fields but if you provide custom implementation of Comparator then it uses that to sort the data. since you are already sorting it on server thus you can use this

    var columnDefs = [
    { field: 'customField', comparator: customComparator},
    ....
    ];

    function customComparator(data1, data2) {
    return 0; //means no comparing and no sorting
    }

Valve

In addition, when user clicks column headers to sort, you can listen to that sort event via @sortChanged="" (I use this in Vue context). – Varicotomy

Thx! The suggested workaround works well for me. – Parrnell

Answer 2

1. Remove sortable (or)
2. Use sortType = null

This can be done in ColumnDef.

Lustre

Doesn't this completely disable sorting? OP still wants sorting control in the AG Grid table headers, but to inhibit the actual local sorting that AG Grid would otherwise do by default. – Varicotomy

It didn't help. – Parrnell