Articles in this section
Category / Section

How to Hide Default and Show Custom Spinner in Blazor DataGrid?

3 mins read

This article explains how to hide the default spinner and show the customized spinner in Blazor DataGrid. We can hide the default spinner of the Grid using the following CSS style:

<style> 
    .e-grid .e-spinner-pane{ // Hide the Grid spinner.
          display:none; 
     } 
</style>

 

Show or hide the customized spinner based on specific actions like initial load or data bind or performing any data operations. These actions can be performed by using the OnLoad, DataBound, and OnActionBegin events.

The ShowAsync and HideAsync methods of the SfSpinner have been used in the OnLoad, DataBound, and OnActionBegin events of the Grid to show and hide the customized spinner in the following sample:

@using Syncfusion.Blazor.Spinner
@using Syncfusion.Blazor.Grids
 
<SfSpinner @ref="SpinnerObj" CssClass="e-spin-overlay">    
</SfSpinner>
 
<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true" Height="315">
    <GridEvents OnLoad="OnLoad" DataBound="DataBound" OnActionBegin="OnActionBegin" TValue="Order"></GridEvents>
    <GridColumns>
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn>
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date"></GridColumn>
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
    </GridColumns>
</SfGrid>
 
@code{
    public List<Order> Orders { get; set; }
    SfSpinner SpinnerObj;
    public async void OnLoad()
    {
        SpinnerObj.ShowAsync(); // Show the spinner using initial Grid load.   
    }
    public async void DataBound()
    {
       SpinnerObj.HideAsync(); // Hide the spinner after the data is bound to Grid(during data operations also this will be triggered).
    }
    public void OnActionBegin(ActionEventArgs<Order> args)
    {
        if (args.RequestType.ToString() == "Sorting") // Based on request type, show the spinner when sorting action starts.
        {
            SpinnerObj.ShowAsync();
        }
    }
    protected override void OnInitialized()
    {
        Orders = Enumerable.Range(1, 75).Select(x => new Order()
        {
            OrderID = 1000 + x,
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
            Freight = 2.1 * x,
            OrderDate = DateTime.Now.AddDays(-x),
            ShipCountry = (new string[] { "USA", "UK", "CHINA", "RUSSIA", "INDIA" })[new Random().Next(5)]
        }).ToList();
    }
    public class Order
    {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }
        public string ShipCountry { get; set; }
    }
}
 
<style>
    .e-grid .e-spinner-pane {
        display: none;
    }
</style>


View Sample in GitHub.

Reference

https://blazor.syncfusion.com/documentation/datagrid/events#onload

https://blazor.syncfusion.com/documentation/datagrid/events#databound

https://blazor.syncfusion.com/documentation/datagrid/events#onactionbegin

https://blazor.syncfusion.com/documentation/spinner/getting-started

 

Conclusion

I hope you enjoyed learning about how to hide default and show custom Spinner in Blazor DataGrid.

You can refer to our Blazor DataGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor DataGrid example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied