AG Grid - revert to default sorting if no columns are currently sorted

Question

AG Grid - revert to default sorting if no columns are currently sorted

When my ag-grid is initialized, it sorts the data by a default column indicated by this.options.defaultSortColumn. If a user then sorts by another column and removes the sort (by clicking on the header three times), I want to revert back to the default sort and sort by the default column again. Here's what I have tried:

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()
      })
    }
  }
}

However, I keep receiving a Maximum call stack size exceeded error. It seems like the function calls itself repeatedly because it sets the sort and triggers the postSort event before the getSortModel() updates. Am I making a mistake here? Are there alternate methods to restore the default sort when no other column is sorted?

javascript sorting vue.js ag-grid

Answer 1

Answer №1

An alternative approach is to revert the gridOptions state back to its initial configuration when setting up the grid.

this.gridColumnApi.resetColumnState();

As outlined in the documentation -

resetColumnState() - Restores the state to match the original column definitions.

Answer 2

An alternative approach is to revert the gridOptions state back to its initial configuration when setting up the grid.

this.gridColumnApi.resetColumnState();

As outlined in the documentation -

resetColumnState() - Restores the state to match the original column definitions.

Answer 3

Answer №2

To clarify any confusion, it is important to note that the setSortModel function should be passed an array as an argument, not an object.

Here is the correct approach using React:

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

Answer 4

To clarify any confusion, it is important to note that the setSortModel function should be passed an array as an argument, not an object.

Here is the correct approach using React:

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

Answer 5

Answer №3

In order to achieve the desired outcome, you can utilize the following ag grid event - onSortChanged and verify the length of the current sort.

Initialize a default sort and save it to a variable (e.g. defaultSort) upon loading
Utilize the onSortChanged grid API event to monitor the length of the current sort
```
onSortChanged: (e) => { console.log(e.api.getSortModel()) }
```
If the length is 0, establish the default sort using this.gridApi.setSortModel(defaultSort)

Answer 6

In order to achieve the desired outcome, you can utilize the following ag grid event - onSortChanged and verify the length of the current sort.

Initialize a default sort and save it to a variable (e.g. defaultSort) upon loading
Utilize the onSortChanged grid API event to monitor the length of the current sort
```
onSortChanged: (e) => { console.log(e.api.getSortModel()) }
```
If the length is 0, establish the default sort using this.gridApi.setSortModel(defaultSort)

AG Grid - revert to default sorting if no columns are currently sorted

Answer №1

Answer №2

Answer №3

Similar questions

Implementing precise search functionality in a table with jquery datatables

Exploring the world of JavaScript by dynamically retrieving all class functions

How to use jQuery to hide list items after a certain threshold

What is the extent to which a scope variable will be accessible within the link function of Angular?

Can Socket Communication and Server be Established on the Same Port?

Utilizing the componentDidUpdate method to update the state within the component

What are the steps for encountering a duplicate property error in TypeScript?

Looping over a JavaScript object to extract text content similar to Python's requests.text

When inside a function declaration, io.socket is not defined, but it is defined outside of

Using JavaScript to modify the -webkit-animation-play-state

Guide to adding a marker in Vue2-Leaflet while ensuring the popup is initially open

Executing a function within JSX to dismiss a modal in NextJS

Include an extra hyperlink in the adaptive menu bar

Is it possible to add a class to a child element deep within the component hierarchy while using TransitionGroup/CSSTransition in React?

Building a timer using Vue.js and moment.js

How can I initiate an AJAX POST request over HTTPS?

unique color schemes for pie charts with nvd3-angular

Using Vuejs to customize the color of disabled drop-down text

Convert all page links to post requests instead

Counting up in ASP.NET using Javascript