Virtualization.md

Blazor WASM with OData back-end

Grid virtualization

Index

From GridBlazor 4.0.0 on, it's possible to use virtualization instead of grid pagination.

The steps to use virtualization on a grid are:

1. Create a razor page on the client project to render the grid. The Virtualize `method of the GridOdataClient object must be called. The ```ChangeVirtualizedHeight``` method is optional. The page file must have a .razor extension. An example of razor page is:

       @page "/virtualized"
       @using GridShared
       @using GridShared.Utility
       @using Microsoft.Extensions.Primitives
       @inject NavigationManager NavigationManager
       @inject HttpClient HttpClient
   
       @if (_task.IsCompleted)
       {
           <GridComponent T="Order" Grid="@_grid"></GridComponent>
       }
       else
       {
           <p><em>Loading...</em></p>
       }
   
       @code
       {
           private CGrid<Order> _grid;
           private Task _task;
   
           public Action<IGridColumnCollection<Order>> columns = c =>
           {
               c.Add(o => o.OrderID);
               c.Add(o => o.OrderDate, "OrderCustomDate").Format("{0:yyyy-MM-dd}");
               c.Add(o => o.Customer.CompanyName);
               c.Add(o => o.Customer.IsVip);
           };
   
           protected override async Task OnParametersSetAsync()
           {
               var locale = CultureInfo.CurrentCulture;
   
               string url = NavigationManager.BaseUri + "odata/Orders";
               var query = new QueryDictionary<StringValues>();
   
               var client = new GridODataClient<Order>(HttpClient, url, query, false, "ordersGrid", columns, null, locale)
                   .Virtualize(250)
                   .ChangeVirtualizedHeight(true);
               
               _grid = client.Grid;
               _task = client.UpdateGrid();
               await _task;
           }
       }

2. Create an ODataController action in the server project. An example of this type of controller action is:

       public class OrdersController : ODataController
       {
           private readonly NorthwindDbContext _context;
   
           public OrdersController(NorthwindDbContext context)
           {
              _context = context;
           }
   
           ...
   
           [EnableQuery]
           public IActionResult Get()
           {
               var repository = new OrdersRepository(_context);
               var orders = repository.GetAll();
               return Ok(orders);
           }
       }

The Virtualize method has 2 optional parameters:

Parameter	Description
height	integer to define the grid height (optional). The default value is 450 (pixels)
width	string to define the grid width (optional). The default value is "auto"

Notes:

• Grid virtualization is compatible with:

  • Sorting
  • Filtering
  • Extended sorting
  • Totals
  • Items count
  • Excel export
  • Column re-arrangment
  • CRUD (CRUD forms are shown as modal windows automatically)

• Grid virtualization is not compatible with:

  • Subgrids
  • Selectable grids
  • Checkbox columns
  • Searching
  • Grouping

<- Grid dimensions