GRID FEATURE

Sort and search on the server

Server queries send row ranges, sorting, and filtering together as conditions. Use the Infinite model for simple lists and consider the Server-Side model for server grouping and pivoting.

How it works and when to use it

Do not insert client-supplied field names directly into SQL. Interpret only allowed fields and operators, and calculate rows and total from the same conditions.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

Example 1. Request sorting by responsible team

The sort model is an array of field and direction entries. Earlier entries take precedence in multi-column sorting.

javascript
await grid.setSortModel([
  { field: 'team', direction: 'asc' },
  { field: 'quantity', direction: 'desc' }
]);

Verify the result: The server must apply the requested conditions to keep order consistent across pages. Sorting within one page does not guarantee a global order.

Example 2. Handle search and paging together

For a request with search term Platform, startRow 0, and endRow 100, the server searches, sorts, then slices the range. It also calculates the total after filtering.

Verify the result: The response total is the number of all matching orders, not the count before filtering. Keep the same conditions for subsequent pages.

Example 3. Handle late responses

After a user changes a search from A to AB, the A request may finish later. Use request IDs or cancellation signals so stale responses cannot overwrite newer queries.

Verify the result: Only results for the latest user conditions should remain visible. Distinguish cancelled requests from actual server errors in your messages.

Combining features and troubleshooting

New orders added between offset-based page queries may cause duplicates or omissions. Use a stable secondary sort key or a server snapshot boundary.

A short response is not necessarily an error. It may be the final range; evaluate it together with the total count.

Related reading