How to implement server-side paging, filtering and server-side sorting via APIs

How to implement server-side paging, filtering and server-side sorting via APIs

Posted by: nilesh_nichal on 3 February 2026, 12:37 pm EST

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy

  Posted 3 February 2026, 12:37 pm EST - Updated 3 February 2026, 12:50 pm EST

  Hi Wijmo Team,

  I am using Wijmo FlexGrid in Angular and I want to implement server-side operations instead of client-side processing.

  Requirement:
  
  I have separate server APIs and I want the grid to behave like:

  1.Server-side Pagination / Lazy Loading

  Load only the first 50 records initially
  
  Load the next batch of 50 on scroll(virtual/lazy loading)

  2.Server-side Filtering

  When user applies filters using wj-flex-grid-filter, I want filter parameters to be sent to server (API)
  
  Server should return filtered results + total count (if needed)

  3.Server-side Sorting

  When user clicks column headers to sort, I want sorting parameters (field + asc/desc) to be sent to server
  
  Server returns sorted results

  Questions
  
  1 What is the recommended Wijmo approach for server-side paging/lazy loading in FlexGrid((load next 50 when scrolling near bottom)?
  
  2.How can I intercept filter changes from wj-flex-grid-filter so I can call my server API with filter payload?
  
  3. How can I handle server-side sorting in FlexGrid?
  
  4. Could you please share a sample Angular example
  
  -Request format: skip/take (or page + pageSize), filters, sorting
  
  -Response format including items and optionally totalCount
  
  -Wiring it to wj-flex-grid so user actions trigger API calls

  Current grid setup

  <wj-flex-grid
    [itemsSource]="dataCollection"
    [selectionMode]="'None'"
    headersVisibility="Column">
    <wj-flex-grid-filter [filterColumns]="filterableColumns"></wj-flex-grid-filter>
    <wj-flex-grid-column [binding]="'username'" [width]="170" [isReadOnly]="true"></wj-flex-grid-column>
    <wj-flex-grid-column [binding]="'firstName'" [width]="150"></wj-flex-grid-column>
    <wj-flex-grid-column [binding]="'lastName'" [width]="150"></wj-flex-grid-column>
    <wj-flex-grid-column [binding]="'status'" [width]="100"></wj-flex-grid-column>
    <wj-flex-grid-column [binding]="'tags'" [width]="240" [allowSorting]="false"></wj-flex-grid-column>
    <wj-flex-grid-column [binding]="'categories'" [width]="240" [allowSorting]="false"></wj-flex-grid-column>
    <wj-flex-grid-column [binding]="'isExternal'" [width]="100" [allowSorting]="false"></wj-flex-grid-column>
    <wj-flex-grid-column [binding]="'externalUrl'" [width]="'*'" [allowSorting]="false"></wj-flex-grid-column>
  </wj-flex-grid>

  Server API expectation (example)
  
  I am aiming like below API:

  API1 (Pagination / Lazy Load)
  
  GET /api/users? start=0&count=50 - first request , after scroll in next request GET /api/users? start=50&count=50

  API2 (Filter)
  
  GET /api/users?skip=0&take=50&filters=…

  API3 (Sort)
  
  GET /api/users?skip=0&take=50&sortBy=name&sortDir=asc

  Or a combined API that accepts all parameters together.
  
  If you can provide a recommended pattern and a working sample (or reference link), it would be really helpful.

  Note: We want all three operations (pagination/lazy loading, filtering, sorting) handled on server because the dataset is large.

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 4 February 2026, 1:32 am EST

  Hi Nilesh,
  
  You can use Wijmo’s RestCollectionView class for implementing server-side paging, filtering, and sorting in the flexgrid. Here are a few demo samples for your reference - https://developer.mescius.com/wijmo/demos/Core/CollectionView/RestCollectionView/RestApi/Overview/angular
  
  https://developer.mescius.com/wijmo/demos/Core/CollectionView/RestCollectionView/OData/angular
  
  https://developer.mescius.com/wijmo/demos/Core/CollectionView/RestCollectionView/JSONPlaceholder/angular
  
  In the above demo samples, you’ll find that a custom collectionView is used as a data source for the flexgrid that is extended from the RestCollectionView class, by overriding the necessary methods of the RestCollectionView class. You can adjust the API request URL as per your needs. The API implementation of OData and a few other API’s is already available in our demo samples. You can explore the demo samples implementation first, to get an overview of how the filtering, sorting, and paging are handled, how the filtering definition is integrated into the API request URL, etc. Probably the OData API sample would be best for your usecase; however, you can also create your own custom CollectionView by extending the RestCollectionView class and implementing the server-side sorting, filtering, and paging as per your server requirements.
  
  For more information about the RestCollectionView class, please refer to the following API link - https://developer.mescius.com/wijmo/api/classes/Wijmo_Rest.Restcollectionview.html
  
  Regards