Server-Side Row Model
Load data on-demand from a server with server-side sorting, filtering, and pagination.
AG Grid Enterprise Module Required
The Server-Side Row Model feature requires the
@ag-grid-enterprise/server-side-row-model module.
✨ Modular Architecture:
- Base: AG Grid Community (~200KB) - free, open source
- + Server-Side Module: (~100KB) - requires Enterprise license
- Total: ~300KB vs. ~800KB full Enterprise bundle
- Savings: 62% smaller bundle size!
Licensing Information:
- For Development/Testing: The Enterprise module works without a license but displays a watermark. This is acceptable for evaluation and development purposes.
- For Production: You must purchase an AG Grid Enterprise license to remove the watermark and use the Server-Side Row Model module in production.
- Alternative: The Grid component also supports Client-Side Row Model (included in AG Grid Community - free), which works great for datasets up to 10,000 rows. See the Client-Side Grid examples.
Note: BlazorUI uses a modular approach - AG Grid Community (free) as the base with Enterprise modules loaded only when needed. You only pay for the Enterprise features you use.
Server-Side Sorting & Filtering (Simulated)
Demonstrates how to implement server-side sorting and filtering with a mock dataset. The paging is infinite scrolling, notice that more rows will be retrieved as needed.
How It Works
- Grid sends sort/filter parameters/requested rows to your callback
- Your callback applies sorting/filtering on server or database
- Return results with total count
- Grid displays results and update the status
No requests yet
View Implementation Code
private async Task<GridDataResponse<Product>> HandleSimulatedServerDataRequest(
GridDataRequest<Product> request)
{
// Simulate network delay
await Task.Delay(300);
// Start with full dataset (simulate database query)
var query = allProducts.AsQueryable();
// Apply server-side filtering
foreach (var filter in request.FilterDescriptors)
{
query = ApplyFilter(query, filter);
}
// Get total count after filtering
var totalCount = query.Count();
// Apply server-side sorting
if (request.SortDescriptors.Any())
{
var sort = request.SortDescriptors.First();
query = ApplySorting(query, sort);
}
// Apply pagination
var pagedData = query
.Skip(request.StartIndex)
.Take(request.Count)
.ToList();
return new GridDataResponse<Product>
{
Items = pagedData,
TotalCount = totalCount
};
}🎬 Movie Database (TMDb API)
Full-featured server-side Grid with sorting, filtering, and pagination using The Movie Database API.
TMDb API Key Required
This demo uses The Movie Database (TMDb) API. Get your free API key at TMDb API Settings.
Don't have an API key? Using demo data instead.
Features Demonstrated
- Server-Side Pagination: Load data in pages from TMDb API
- Server-Side Sorting: Click column headers to sort by popularity, rating, release date, or title
- Server-Side Filtering: Filter movies by year, minimum rating, and genre
- Real API Integration: Actual HTTP requests to TMDb discover endpoint
- Loading States: Visual feedback during data fetches
No requests yet
View Implementation Code
private async Task<GridDataResponse<Movie>> HandleMovieDataRequest(
GridDataRequest<Movie> request)
{
isMovieLoading = true;
StateHasChanged();
try
{
// Build TMDb API URL with parameters
var page = (request.StartIndex / request.Count) + 1;
var sortBy = MapSortField(request.SortDescriptors.FirstOrDefault());
var url = $"https://api.themoviedb.org/3/discover/movie?page={page}";
if (!string.IsNullOrEmpty(sortBy)) url += $"&sort_by={sortBy}";
if (appliedFilterYear.HasValue) url += $"&primary_release_year={appliedFilterYear}";
if (appliedFilterRating.HasValue) url += $"&vote_average.gte={appliedFilterRating}";
if (!string.IsNullOrEmpty(appliedFilterGenre)) url += $"&with_genres={appliedFilterGenre}";
// Call TMDb API
var response = await CallTmdbApiAsync<TmdbDiscoverResponse>(url);
// Map to Grid response
return new GridDataResponse<Movie>
{
Items = response.Results.Select(MapToMovie),
TotalCount = response.TotalResults
};
}
finally
{
isMovieLoading = false;
StateHasChanged();
}
}When to Use Server-Side Row Model
✅ Use Server-Side When:
- Dataset has 100,000+ rows
- Data changes frequently (real-time updates)
- Data must remain on server (security/privacy)
- Complex server-side filtering/aggregation needed
- Want to minimize initial page load time
📊 Use Client-Side When:
- Dataset is under 10,000 rows
- Data is static or changes infrequently
- Instant filtering/sorting UX is critical
- Want to minimize server load
- Offline mode support needed
Best Practices
- Always return accurate
TotalCountfor proper pagination - Implement server-side caching to improve performance
- Use database indexes on sortable/filterable columns
- Consider implementing debouncing for filter requests
- Show loading indicators during data fetch
- Handle errors gracefully and show user-friendly messages