My ag-grid has a default sort this.options.defaultSortColumn, by which the data is sorted once initialized. Now when the user sorts by another column and then removes the sort again (by clicking on the header 3 times), I'd like to restore the default sort and sort the data by the default column again. I tried the following:

postSort () {
  if (this.gridApi) {
    let currentSort = this.gridApi.getSortModel()
    console.log(currentSort)
    if (this.options.defaultSortColumn && currentSort && currentSort.length === 0) {
      // reset default sort, if no other sort is active
      this.gridApi.setSortModel({
        colId: this.options.defaultSortColumn,
        sort: (this.options.defaultSortDir || 'asc').toLowerCase()
      })
    }
  }
}

But this causes a Maximum call stack size exceeded, I assume because it sets the sort and then runs the postSort event again, before the getSortModel() is updated, so it just keeps calling the event over and over. Am I doing something wrong? Or are there other ways to restore a default sort when no other column is sorted by?

My ag-grid has a default sort this.options.defaultSortColumn, by which the data is sorted once initialized. Now when the user sorts by another column and then removes the sort again (by clicking on the header 3 times), I'd like to restore the default sort and sort the data by the default column again. I tried the following:

postSort () {
  if (this.gridApi) {
    let currentSort = this.gridApi.getSortModel()
    console.log(currentSort)
    if (this.options.defaultSortColumn && currentSort && currentSort.length === 0) {
      // reset default sort, if no other sort is active
      this.gridApi.setSortModel({
        colId: this.options.defaultSortColumn,
        sort: (this.options.defaultSortDir || 'asc').toLowerCase()
      })
    }
  }
}

But this causes a Maximum call stack size exceeded, I assume because it sets the sort and then runs the postSort event again, before the getSortModel() is updated, so it just keeps calling the event over and over. Am I doing something wrong? Or are there other ways to restore a default sort when no other column is sorted by?

• javascript
• sorting
• vue.js
• ag-grid

• where are you using this postSort method? on every column?? – Naga Sai A Commented Jul 25, 2019 at 13:48
• @NagaSaiA no, I have it in the gridOptions on the grid itself, so <ag-grid-vue :postSort="postSort"> – elveti Commented Jul 25, 2019 at 13:59
• on option is to set default sort model on load to a variable (say defaultSort) and use onSortChanged grid API event and check the currentSort.length and set default sort using this.gridApi.setSortModel(defaultSort) instead of using postSort – Naga Sai A Commented Jul 25, 2019 at 14:15
• onSortChanged: (e) => { console.log(e.api.getSortModel()) } – Naga Sai A Commented Jul 25, 2019 at 14:23
• 1 posted ments as answer with steps and issue is with the postSort which is getting called multiple times for each row – Naga Sai A Commented Jul 25, 2019 at 14:39

3 Answers 3

You could also reset the gridOptions state to what it was while initializing the grid.

this.gridColumnApi.resetColumnState();

From the docs -

resetColumnState() - Sets the state back to match the originally provided column definitions.

To sum up because there is some confusion going on. The setSortModel function should have an array as argument not an object.

The correct way (React example)

  <AgGridReact onSortChanged={e => {
     if (!e.api.getSortModel().length) {
       e.api.setSortModel([
         {
          colId: 'columnId',
          sort: 'desc' // 'asc'
         }  
       ])
     }   
   }

To achieve expected result, use below ag grid event - onSortChanged and check for the length of current sort

1. Assign default sort to variable (say defaultSort) on load

2. Using onSortChanged grid API event, check the currentsort length

   onSortChanged: (e) => { console.log(e.api.getSortModel()) }

3. If length is 0, setdefault sort using this.gridApi.setSortModel(defaultSort)