AG Grid
Results:
Loading...
Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

JavaScript Data Grid: SSRM Sorting

This section covers Server-Side Sorting using the Server-Side Row Model.

Enabling Sorting

Sorting is enabled in the grid via the sortable column definition attribute.

const gridOptions = {
    columnDefs: [
        { field: 'country', sortable: true },
        { field: 'year', sortable: true },
        { field: 'sport' },
    ],

    // other grid options ...
}

For more details on sorting configurations see the section on Row Sorting.

Client-side Sorting

When Infinite Scroll is not active, the grid has all the rows needed to sort on the client. As such, the SSRM will sort on the client-side.

The example below demonstrates Client-side Sorting with no Infinite Scroll. Note the following:

  • The grid is not using Infinite Scroll, the property serverSideInfiniteScroll is not set.
  • All columns have sorting enabled using the defaultColDef.sortable = true.
  • Rows are loaded once. All sorting is then subsequently done by the grid.

Server-side Sorting

When Infinite Scroll is active, the grid does not have all the rows needed to sort on the client. As such, the server-side row model will request rows again each time the sort changes and expect the server to sort the rows.

The request object sent to the server contains sort metadata in the sortModel property. An example of the sortModel is as follows:

// Example request with sorting info
{
    sortModel: [
        { colId: 'country', sort: 'asc' },
        { colId: 'year', sort: 'desc' },
    ],

    // other properties
}

Notice sortModel is an array with each item representing a Column with an active sort, containing the Column ID and the Sort Direction.

The example below demonstrates sorting using the SSRM and Infinite Scrolling. Note the following:

  • The grid has Infinite Scrolling enabled via serverSideInfiniteScroll=true.
  • All columns have sorting enabled via defaultColDef.sortable = true.
  • The server uses the metadata contained in the sortModel to sort the rows.
  • Open the browser's dev console to view the sortModel supplied in the request to the datasource.
  • Try single / multi column (using Shift key) sorting by clicking on column headers.

As previously mentioned, when not using Infinite Scroll, the grid will sort on the client. To force Server-side Sorting, regardless of Infinite Scroll, set serverSideSortOnServer=true. This is demonstrated below, note the following:

  • The grid is not using Infinite Scroll, the property serverSideInfiniteScroll is not set.
  • Grid property serverSideSortOnServer=true to force Server-side Sorting.
  • Rows are loaded every time the sort order changes.

Client-side Row Group Sorting

Sorting row groups Client-side (Infinite Scroll is off) happens inside the grid by default.

The example below shows Client-side sorting of groups. Note the following:

  • The grid is not using Infinite Scroll, the property serverSideInfiniteScroll is not set.
  • All columns have sorting enabled via defaultColDef.sortable = true.
  • Click the Gold column header to sort, open the browser console and note there are no requests to the server - the grid sorts client-side without reloading the rows.

Server-side Row Group Sorting

When grouping and Server-side sorting, the grid will reload the data if it needs to be sorted.

Not all rows need to be reloaded when a sort changes. Group levels only need to be reloaded (sorted) if the sort impacts the group level. A sort will impact a group level if the sort is on a grouped column, or the sort is on an aggregated column (ie colDef.aggFunc is set).

The example below demonstrates. Note the following:

  • Sorting is done on the Server-side via grid property serverSideSortOnServer=true.
  • Sorting by Country reloads the top level groups.
  • Sorting by Sport reloads the second level group, the top level is not impacted.
  • Sorting by Year does not reload any groups. Only leaf-levels are reloaded.
  • Sorting by Gold, Silver or Bronze does reload groups, as they columns have aggFunc set.

To override this behaviour, and always have the grid reload all rows when a sort changes, set the grid property serverSideSortAllLevels=true.

The example below is identical to the above, except serverSideSortAllLevels=true.

Next Up

Continue to the next section to learn about SSRM Filtering.