Spinner not working inside datagrid

[Jacob Loncar]

I have a data grid where I get the data from a data base fired from a button click. What I want is to have the spinner start spinning when the user clicks the button and the site grabs the data from the database. What ends up happening is that the spinner does not show until the site finished fetching the data from the database. 

Here is my code:

<div class="col-12 my-2">

    <SfButton OnClick="GenerateReport" CssClass="done-btn" Disabled="@(selectedItems.Count == 0)">Generate Report</SfButton>

</div>

<div class="col-lg-12 control-section">

    <div class="content-wrapper">

        <div class="row">

            <SfGrid ID="agent-aux-grid" @ref="Grid" DataSource="@gridItems"

                    AllowGrouping="true" AllowSorting="true" AllowPaging="true" AllowExcelExport="true" AllowPdfExport="true"

                    Toolbar="@(new List<string>() { "ExcelExport", "PdfExport" })">

                <GridEvents OnToolbarClick="ToolbarClick" TValue="DataGridItem"

                            ExcelQueryCellInfoEvent="ExcelQueryCellInfoHandler"

                            ExcelAggregateTemplateInfo="ExcelAggregateTemplateInfoHandler"

                            PdfQueryCellInfoEvent="PdfQueryCellInfoHandler"

                            PdfAggregateTemplateInfo="PdfAggregateTemplateInfoHandler"></GridEvents>

                <GridGroupSettings ShowDropArea="false" Columns=@GroupedColumn></GridGroupSettings>

                <GridPageSettings PageCount="5"></GridPageSettings>

                <GridColumns>

                    <GridColumn Field=@nameof(DataGridItem.Name) HeaderText="Name" Width="120"></GridColumn>

                    <GridColumn Field=@nameof(DataGridItem.Start) HeaderText="Start" Width="120"></GridColumn>

                    <GridColumn Field=@nameof(DataGridItem.End) HeaderText="End" Width="120"></GridColumn>

                    <GridColumn Field=@nameof(DataGridItem.StateName) HeaderText=" StateName" Format="d" Width="100"></GridColumn>

                    <GridColumn Field=@nameof(DataGridItem.Duration) HeaderText="Duration" Width="100">

                        <Template>

                            @{

                                var data = context as DataGridItem;

                                <div>

                                    <p>@FormatSeconds(data.Duration)</p>

                                </div>

                            }

                        </Template>

                    </GridColumn>

                </GridColumns>

                <SfSpinner @bind-Visible="@isLoading" CssClass="e-spin-overlay" Label="Loading Data..."></SfSpinner>

            </SfGrid>

        </div>

    </div>

</div>

@code { 

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

      public void GenerateReport()

    {

        this.isLoading = true;

        InvokeAsync(() => gridItems = DataGridItem.GetAgtData(selectedItems, fromDate, toDate));

        this.isLoading = false;

    }

}

However if I make a button to only show the spinner and now fetch data like: 

 public void showSpinner()

    {

        if (!isLoading)

        {

            isLoading = true;

        }

        else

        {

            isLoading = false;

        }

    }

The spinner work properly. 

Please advise on how to properly get the spinner to show up while the site fetches data.

[Revanth Krishnan]

Hi Jacob, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “Spinner not working inside the Datagrid”. 

  

We tried to reproduce the issue with the shared code snippet in the following ways.  

• Rendering the spinner inside a grid
• Showing the spinner on button click to fetch the Grid records.
• Hiding the spinner after fetching the records.

  

But we couldn’t reproduce the issue from our end. We suspect that the issue may occur due to the Grid data loaded quickly. Also, the method that shows the spinner and fetches the record doesn’t async. So, please use the ‘Task.Delay’ before hiding the spinner. 

We have prepared a sample based on the code snippet for your reference, 

 

Code Snippet: 

 

public async Task GenerateReport() 

    { 

        this.isLoading = true; 

        await Task.Delay(2000); 

        await InvokeAsync(() => 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()); 

 

        this.isLoading = false; 

    } 

 

Sample: https://www.syncfusion.com/downloads/support/forum/162449/ze/Spinner_Inside_Grid-2048574497 

 

If the issue still occurs, please share us with more details like the issue reproducible sample or please modify the shared samples with the issue reproducing steps. 

  

These details will be helpful for us to validate and reproduce the issue from our end and assist you at the earliest. 

 

Regards, 

Revanth