How to show spinner while Loading the data in Blazor Listview.

[Syncfusion Support]

Answer:

Blazor ListView OnActionBegin and OnActionComplete event is triggered for loading the ListView datasource.

OnActionBegin - Triggers when every ListView action starts.

OnActionComplete-Triggers when every ListView actions completed.

Using this method, we can show/hide the spinner element using ShowSpinner and HideSpinner method.

Refer to the below code snippet.

<SfSpinner @ref="SpinnerObj" Target="#ListView">  

</SfSpinner>  

<SfListView TValue="DataModel" ID="ListView" @ref="listview" DataSource="@Data">  

    <ListViewEvents TValue="DataModel" OnActionBegin="action_begin" OnActionComplete="action_complete"></ListViewEvents>  

    <ListViewFieldSettings Id="Id" Text="Text"></ListViewFieldSettings>  

</SfListView>  

  

@code {  

    SfSpinner SpinnerObj;  

    SfListView<DataModel> listview;  

    List<DataModel> Data = new List<DataModel>();  

    private string Target { get; set; } = "#ListView";    

  public async Task action_begin(Object args)  

    {  

        SpinnerObj.ShowSpinner(Target);  

    }  

    public async Task action_complete(Object args)  

    {  

        await Task.Delay(1000);  

        SpinnerObj.HideSpinner(Target);  

    }  

}

Find the sample for show spinner while Loading the data in Blazor Listview from here.

[horacioj]

Hi,

Which is the best way to do this in the current version (20.2.0.39)? Because  Target  doesn't exists.

Thanks!

[Buvana Sathasivam]

Hi Horacioj,

Greetings from Syncfusion support.

We want to let you know that we have deprecated the Target property in the 2021 Vol 3 release and mentioned that it will no longer be used. Now, you can use the spinner directly inside the target element where you want to show the spinner. Please check the code below.

Index.razor

<div id="container">

    <SfSpinner @bind-Visible=@VisibleProperty Label="Loading Event Data....">

    </SfSpinner>

    <SfListView TValue="DataModel">

         <ListViewEvents TValue="DataModel" OnActionBegin="action_begin" OnActionComplete="action_complete"></ListViewEvents>

………

     </SfListView>

 

</div>

 

@code{

    private bool VisibleProperty { get; set; } = false;

 

public async Task action_begin(Object args)

    {

        this.VisibleProperty = true; // Show Spinner component

    }

    public async Task action_complete(Object args)

    {

        await Task.Delay(1000);

        this.VisibleProperty = false; // Hide Spinner component

    }

 

    }

Sample:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/LISTVI~2-1790361411

Release Notes:
https://blazor.syncfusion.com/documentation/release-notes/18.3.35?type=all#spinner

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

Regards,

Buvana S

[horacioj]

Thank you, Buvana.

[Vinitha Jeyakumar]

We are glad to assist you