New to Telerik UI for Blazor? Start a free 30-day trial
Showing a Loader While Exporting the Grid
Updated over 6 months ago
Environment
| Product | Grid for Blazor |
Description
I have many items in the Grid and the export to Excel, CSV or PDF takes a while. Is it possible to show a loader while the Grid is exporting to prevent the user from interacting with the component during this time?
Solution
To display a loader over the Grid during the Excel, CSV or PDF export, follow the steps below:
- Choose the deired UI for the Loader (this article shows the first two options):
- A LoaderContainer. Place the LoaderContainer component in a container together with the Grid and add
position:relativestyle on this container to ensure the LoaderContainer covers only the Grid. - A modal Window with a Loader component inside.
- Your custom loader.
- A LoaderContainer. Place the LoaderContainer component in a container together with the Grid and add
- Handle the
OnBeforeExportevent of the Grid to show the loader (set the loader's visibility totrue). - Handle the
OnAfterExportevent of the Grid to hide the loader (set the loader's visibility tofalse).
Show a Loader during Grid export
@* Option 1.1. - a LoaderContainer *@ <div style="position:relative"> <TelerikGrid Data="@GridData" AutoGenerateColumns="true" Pageable="true"> <GridToolBarTemplate> <GridCommandButton Command="ExcelExport" Icon="@SvgIcon.FileExcel">Export to Excel</GridCommandButton> <label class="k-checkbox-label"><TelerikCheckBox @bind-Value="@ExportAllPages" />Export All Pages</label> </GridToolBarTemplate> <GridExport> <GridExcelExport FileName="telerik-grid-export" AllPages="@ExportAllPages" OnBeforeExport="@OnExcelBeforeExport" OnAfterExport="@OnExcelAfterExport" /> </GridExport> </TelerikGrid> <TelerikLoaderContainer Visible="@isExporting" Text="Please wait, the file is loading..."/> </div> @* Option 1.2. - a modal Window with a Loader component inside. *@ @* <TelerikWindow @bind-Visible="@isExporting" Modal="true"> <WindowTitle>Please wait...</WindowTitle> <WindowContent> <TelerikLoader Visible="@true"/> We are exporting your data, your file will download shortly. </WindowContent> </TelerikWindow> *@ @code { private bool isExporting { get; set; } private bool ExportAllPages { get; set; } = true; private List<SampleData> GridData { get; set; } private async Task OnExcelBeforeExport(GridBeforeExcelExportEventArgs args) { isExporting = true; // Release the UI thread so the loading indicator can be rendered await Task.Delay(1); } private async Task OnExcelAfterExport(GridAfterExcelExportEventArgs args) { isExporting = false; } protected override void OnInitialized() { GridData = Enumerable.Range(1, 100000).Select(x => new SampleData { ProductId = x, ProductName = $"Product {x}", UnitsInStock = x * 2, Price = 3.14159m * x, Discontinued = x % 4 == 0, }).ToList(); } public class SampleData { public int ProductId { get; set; } public string ProductName { get; set; } public int UnitsInStock { get; set; } public decimal Price { get; set; } public bool Discontinued { get; set; } } }