Spinner in datagrid

[Dingo]

Can anyone point me into the direction where when the data initially loads, we can place a spinner saying loading whilst the data is being received.. At the moment when the data is being rendered - No records to display.. Sometimes it is taking around 10 seconds before the data shows...

How is it possible to add a spinner and replace the text until the data loads? 

<div id="divface">

    <SfSpinner @ref="SpinnerObj" Target="@Target" CssClass="e-spin-overlay" Label="Loading . . . " Width="75px" />

</div>

    <TabItem>

                                <HeaderTemplate>

                                    Special Release History

                                </HeaderTemplate>

                                <ContentTemplate>

                                    <div>

                                        <SfGrid DataSource="@ReworkHistoryReplacement" AllowFiltering="true" Height="415" AllowSorting="true" AllowGrouping="true">

                                            @*<GridEvents OnActionBegin="BeginHistory" TValue="ReworkHistoryPartReplacementModel"></GridEvents>*@

                                            <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>

                                            <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" ShowConfirmDialog="true" ShowDeleteConfirmDialog="true" Mode="EditMode.Dialog"></GridEditSettings>

                                            <GridPageSettings PageSizes="10"></GridPageSettings>

                                            <GridColumns>

                                                <GridColumn Field="Id" HeaderText="Id" IsPrimaryKey="true" ValidationRules="@(new ValidationRules { Required = true })" TextAlign="TextAlign.Center" Visible="false" Width="200"></GridColumn>

                                                <GridColumn Field="Pattern" HeaderText="Pattern" IsPrimaryKey="true" ValidationRules="@(new ValidationRules { Required = true })" TextAlign="TextAlign.Center" Width="200"></GridColumn>

                                                <GridColumn Field="Reason" HeaderText="Reason" Width="250" ValidationRules="@(new ValidationRules { Required = true })" TextAlign="TextAlign.Center"></GridColumn>

                                                <GridColumn Field="ComponentIdentifier" HeaderText="  Component" Type="ColumnType.Date" ValidationRules="@(new ValidationRules { Required = true })" TextAlign="TextAlign.Center" Width="120"></GridColumn>

                                                <GridColumn Field="RecipeName" HeaderText="Recipe" ValidationRules="@(new ValidationRules { Required = true })" TextAlign="TextAlign.Center" Width="120"></GridColumn>

                                                <GridColumn Field="StepNumber" HeaderText="Step" ValidationRules="@(new ValidationRules { Required = true })" TextAlign="TextAlign.Center" Width="120"></GridColumn>

                                                <br />

                                                <GridColumn Field="StartDate" HeaderText="Start Date" Format="d" ValidationRules="@(new ValidationRules { Required = true })" TextAlign="TextAlign.Center" Width="120"></GridColumn>

                                                <GridColumn Field="EndDate" HeaderText="End Date" Format="d" ValidationRules="@(new ValidationRules { Required = true })" TextAlign="TextAlign.Center" Width="120"></GridColumn>

                                                <GridColumn Field="AddedBy" HeaderText="Added by" ValidationRules="@(new ValidationRules { Required = true })" TextAlign="TextAlign.Center" AllowEditing="false" Width="120"></GridColumn>

                                                <GridColumn Field="AddedOnUtc" HeaderText="AddedOnUtc" ValidationRules="@(new ValidationRules { Required = true })" Format="d" TextAlign="TextAlign.Center" AllowEditing="false" Width="120"></GridColumn>

                                            </GridColumns>

                                        </SfGrid>

                                    </div>

                                </ContentTemplate>

                            </TabItem>

                        </TabItems>

                    </SfTab>

                </div>

            </div>

        </div>

    </div>

</div>

</div>

<br />

@code{

    SfSpinner SpinnerObj;

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

    protected override async Task OnInitializedAsync()

    {

        await LoadData();

        await Task.Delay(500);

        SpinnerObj.ShowSpinner(Target);

        //await Task.Delay(5000);

        //SpinnerObj.HideSpinner(Target);

    }

I can get the spinner open but this is at the end after the loadData already brings back the data... Is there a way to only show the spinner in the container of the datagrid?

[Indrajith Srinivasan]

Hi Dingo,

Greetings from Syncfusion support, 

 

We have validated your reported query. Based on the shared code blocks we suspect, you are using the older Syncfusion Nuget versions. With our Volume 3 main release we have improved the SfSpinner performances. Check the below sample and reference links. We have also prepared a sample that tries to meet you  requirements by showing the SfSpinner for Grid container. 

 

We would like you to review the breaking changes and the release notes regarding the changes we have included in this release from the below location before you upgrade. 

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

 

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

 

Sample: https://www.syncfusion.com/downloads/support/forum/158755/ze/SfSpinner_OnInit-1675393321  

 

If the SfSpinner is placed inside the SfGrid tags. it acts as an target for the spinner. 

 

 

@using Syncfusion.Blazor.Grids 

@using Syncfusion.Blazor.Spinner 

 

<SfGrid DataSource="@Orders" AllowPaging="true"> 

    <GridPageSettings PageSize="5"></GridPageSettings> 

    <GridColumns> 

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

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

    </GridColumns> 

    <SfSpinner @bind-Visible="@VisibleProperty"> 

    </SfSpinner> 

</SfGrid> 

 

@code{ 

    public List<Order> Orders { get; set; } 

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

 

    public class Order 

    { 

        public int? OrderID { get; set; } 

        public string CustomerID { get; set; } 

        public DateTime? OrderDate { get; set; } 

        public double? Freight { get; set; } 

    } 

 

    protected override async Task OnInitializedAsync() 

    { 

        this.VisibleProperty = true; 

        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), 

        }).ToList(); 

        await Task.Delay(2000); 

        this.VisibleProperty = false; 

    } 

} 

 

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith 

[Dingo]

That worked perfectly!! thank you.

[Indrajith Srinivasan]

Hi Dingo, 

 

Welcome, 

 

We are glad that your reported issue is resolved. Please get back to us if you need any further assistance. 

 

Regards, 

Indrajith 

[Marc Schluper]

Error The attribute names could not be inferred from bind attribute 'bind-Visible'. Bind attributes should be of the form 'bind' or 'bind-value' along with their corresponding optional parameters like 'bind-value:event', 'bind:format' etc.

I am using SyncFusion.Blazor.Grid (19.1.0.59) and get the error shown above.

Ah. Never mind. The 

@using Syncfusion.Blazor.Spinner

was missing and the error message was not helping.

[Revanth Krishnan]

Hi Marcus, 

 

We are glad that the issue was resolved after adding the reference ‘@using Syncfusion.Blazor.Spinner’. Please let us know if you need any further assistance. 

 

Regards, 

Revanth