Shouldn't the spinner block the grid?

[Tomasz S.]

I'm using:

await ProductsGrid.ShowSpinnerAsync();

The spinner shows up, but I can click on records, select them, etc. 

Is this how it should be? Shouldn't the spinner block grid operations? Or do I have to take care of this myself?

[Prathap Senthil]

Hi Tomasz,

Based on your requirement, we would like to clarify that by default when using the ShowSpinner option, you can still interact with the Grid. For your requirement, where you do not want to allow interaction with the Grid while the spinner is shown, we suggest using CSS customization to achieve this. The CSS customization will apply only when the spinner is displayed; otherwise, it will not be applied.

Kindly refer to the code snippet and sample below for your reference.

 

<SfButton IsPrimary="true" @onclick="OnShowSpinnerClick">Show Spinner</SfButton>

 

    <SfGrid DataSource="_gridData" ID="Grid" @ref="_sfGrid"  AllowSorting="true">

        <GridColumns>

            <GridColumn Field="OrderID" HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>

            <GridColumn Field="CustomerID" HeaderText="Customer ID" Width="150"></GridColumn>

            <GridColumn Field="ShipCity" HeaderText="Ship City" Width="150"></GridColumn>

            <GridColumn Field="ShipCountry" HeaderText="Ship Country" Width="150"></GridColumn>

 

        </GridColumns>

 

    </SfGrid>

 

 

 

@if (IsSpinnerVisible)

{

    <style>

        #Grid.e-grid {

            pointer-events: none;

        }

    </style>

}

 

 

@code

{

    private List<BusinessData> _gridData { get; set; }

 

    private SfGrid<BusinessData> _sfGrid { get; set; }

 

    public bool IsSpinnerVisible { get; set; } = false;

 

 

    private async Task OnShowSpinnerClick(MouseEventArgs obj)

    {

        IsSpinnerVisible = true;

       await _sfGrid.ShowSpinnerAsync();

        await Task.Delay(5_000);

       await _sfGrid.HideSpinnerAsync();

        IsSpinnerVisible = false;

 

    }

}

 

Sample: https://blazorplayground.syncfusion.com/embed/BZLeiMZehSiTVEIb?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Regards,
Prathap Senthil