AG Grid — Server-Side Data Loading

Architecture

This portfolio demo uses a small in-browser data source so it can run on a static Eleventy site. The request panel below mirrors the server-side contract used by the Employee_Client implementation; the real application sends these values through Blazor to its ASP.NET API and database.

Interactive Demo

Example server request

How the Employee_Client implementation works

The original implementation keeps the grid UI in JavaScript while the data operation remains in Blazor. When the grid changes sort or filter state, aggridh.js collects the active conditions and invokes the .NET method. The Blazor method then calls the API with the current page, page size, filter JSON and sort columns.

AG Grid
   ↓
onSortChanged / filter state
   ↓
aggridh.js
   ↓
DotNetObjectReference → LoadGridDataAsync(...)
   ↓
AuthApiService.GetPaginatedComplaintsAsync(
    pageNumber,
    pageSize,
    filtersJson,
    sortCols
)
   ↓
ASP.NET API
   ↓
SQL Server
   ↓
PaginatedResult
   ↓
AG Grid row data

Key implementation details

• Only the requested page is fetched instead of loading the complete dataset into the browser.
• AG Grid sort state is converted into server-friendly Column:Direction values.
• AG Grid filter models are converted into structured filter conditions before the API call.
• Blazor remains responsible for application state and the API call; JavaScript handles the grid lifecycle.
• The approach works well for large SQL-backed tables where browser-side filtering would become expensive.