Blazorise DataGrid: Loading Template
Blazor includes templated components that can accept one or more UI segments as input and render them as part of the component during component rendering. DataGrid is a templated Blazor component that lets you customize various parts of the user interface with template parameters. It enables you to generate custom components or content using your own logic.
Loading Templates
If you want to change display of content, while grid is empty or ReadData is executing, you can use following templates:
EmptyTemplateLoadingTemplate
@using System @using System.Collections.Generic @using System.ComponentModel.DataAnnotations @using System.Linq @using System.Threading.Tasks <DataGrid @ref="datagridRef" TItem="Employee" Data="" @bind-SelectedRow="" TotalItems="" ReadData="" Responsive> <DataGridColumns> <DataGridCommandColumn /> <DataGridColumn Field="@nameof( Employee.Id )" Caption="#" Sortable="false" /> <DataGridColumn Field="@nameof( Employee.FirstName )" Caption="First Name" Editable /> <DataGridColumn Field="@nameof( Employee.LastName )" Caption="Last Name" Editable /> <DataGridColumn Field="@nameof( Employee.Email )" Caption="Email" Editable /> <DataGridColumn Field="@nameof( Employee.Salary )" Caption="Salary" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo( "fr-FR" )" Editable> <EditTemplate> <NumericInput TValue="decimal" Value="@((decimal)context.CellValue)" ValueChanged="@(v => context.CellValue = v)" /> </EditTemplate> </DataGridColumn> </DataGridColumns> <EmptyTemplate> <div class="box"> No employees were found! </div> </EmptyTemplate> <LoadingTemplate> <Progress @ref="progressRef" Color="Color.Primary" Max="100" Value="progress" /> </LoadingTemplate> </DataGrid> <Button Color="Color.Primary" Clicked="() => datagridRef.Reload()">Load</Button>
@code { protected DataGrid.DataGrid<Employee> datagridRef; protected Progress progressRef; protected int progress; protected Employee selectedEmployee; protected int totalEmployees = 0; protected List<Employee> employeeList; public async Task LoadEmployeesFromService( DataGridReadDataEventArgs<Employee> e ) { /* * This can be call to anything like calling an api to load employees. * During execution 'LoadingTemplate' will be displayed. * If your api call returns empty result, then 'EmptyTemplate' will be displayed, * this way you have proper feedback, for when your datagrid is loading or empty. */ progress = 0; await InvokeAsync( StateHasChanged ); await Task.Delay( 500 ); progress = 25; await InvokeAsync( StateHasChanged ); await Task.Delay( 500 ); progress = 50; await InvokeAsync( StateHasChanged ); await Task.Delay( 500 ); progress = 75; await InvokeAsync( StateHasChanged ); await Task.Delay( 500 ); progress = 100; await InvokeAsync( StateHasChanged ); } public class Gender { public string Code { get; set; } public string Description { get; set; } } public class EmployeeData { private static readonly string[] FirstNames = ["Samuel", "Irvin", "Cora", "Jessie", "Maryann", "Kara"]; private static readonly string[] LastNames = ["Collier", "Ziemann", "Conn", "Wilkinson", "Hilpert", "Brekke"]; private static readonly string[] Cities = ["London", "Paris", "New York", "Berlin", "Lisbon", "Zagreb"]; public static IEnumerable<Gender> Genders = [ new() { Code = null, Description = string.Empty }, new() { Code = "M", Description = "Male" }, new() { Code = "F", Description = "Female" }, new() { Code = "D", Description = "Diverse" } ]; public Task<List<Employee>> GetDataAsync() => Task.FromResult( Enumerable.Range( 1, 500 ) .Select( index => { string firstName = FirstNames[( index - 1 ) % FirstNames.Length]; string lastName = LastNames[( index - 1 ) % LastNames.Length]; return new Employee { Id = index, FirstName = firstName, LastName = lastName, Email = $"{firstName}.{lastName}{index}@example.com", City = Cities[( index - 1 ) % Cities.Length], Zip = $"{10000 + index}", DateOfBirth = new DateTime( 1950 + index % 50, 1 + index % 12, 1 + index % 28 ), Childrens = index % 6, Gender = index % 3 == 0 ? "D" : index % 2 == 0 ? "F" : "M", Salary = 50000m + index * 137m % 50000m, IsActive = index % 2 == 0, Salaries = Enumerable.Range( 1, index % 4 ) .Select( month => new Salary { Date = new DateTime( 2025, month, 1 ), Total = 1000m + index * month * 11m } ) .ToList() }; } ) .ToList() ); } public class Employee { public Employee() { } public Employee( Employee other ) { Id = other.Id; Childrens = other.Childrens; DateOfBirth = other.DateOfBirth; City = other.City; Email = other.Email; FirstName = other.FirstName; LastName = other.LastName; Gender = other.Gender; IsActive = other.IsActive; Salaries = other.Salaries; Salary = other.Salary; Tax = other.Tax; Zip = other.Zip; } [Display( Name = "Id" )] public int Id { get; set; } [Required] public string FirstName { get; set; } [Required] public string LastName { get; set; } [Required] [EmailAddress] [Display( Name = "Email" )] public string Email { get; set; } [Display( Name = "City" )] public string City { get; set; } [Display( Name = "Zip" )] public string Zip { get; set; } [Display( Name = "DOB" )] public DateTime? DateOfBirth { get; set; } [Display( Name = "Childrens" )] public int? Childrens { get; set; } [Display( Name = "Gender" )] public string Gender { get; set; } [Display( Name = "Salary" )] public decimal Salary { get; set; } [Display( Name = "Tax" )] public decimal Tax { get { if ( tax == 0 && Salary > 0 ) { tax = Salary * TaxPercentage; } return tax; } set { tax = value; } } [Display( Name = "Active" )] public bool IsActive { get; set; } public List<Salary> Salaries { get; set; } = new(); public decimal ChildrensPerSalary => Salary == 0m ? 0m : ( Childrens is null || Childrens == 0 ? 1 : Childrens.Value ) / Salary; public decimal TaxPercentage = 0.25m; private decimal tax; } public class Salary { public DateTime Date { get; set; } public decimal Total { get; set; } } }
API
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.