Server-Side Row Model

Load data on-demand from a server with server-side sorting, filtering, and pagination.

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.

Loading...
Total Products: 500 | Current Page Size: 10 | Server Requests: 0
Last Request Parameters:
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.

Showing 0 movies of 0 total | Page 1
Loading...
Last Request: --:--:-- | Requests Made: 0 | Data Source: Demo Data
Last Query Parameters:
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
An unhandled error has occurred. Reload 🗙