1. Home
  2. Forum
  3. Blazor
  4. Show spinner while dialog edit is being processed, as well as when delete confirmed when utilizing custom dataadapter

Show spinner while dialog edit is being processed, as well as when delete confirmed when utilizing custom dataadapter

Afternoon,

I have a need to show the user that their action is being processed after they click on the save button in the dialog edit screen as well as when they confirm that they want to delete a specific record. Does anyone know if there is a flag I am missing in the adaptor to get spinners working

I am utilizing a DataAdaptor injected into the grid control as a blazor component.

Desired/Expected: While save/delete operations are processed the Dialog/grid would show spinner
Actual: UI shows no visible indication of work.


DelayedAdaptor.cs

        public class DelayedAdaptor : DataAdaptor
        {
            private IEnumerable Data { get; set; } = new List() {
            new Row { Col1 = "test", Col2 = "tset" },
            new Row { Col2 = "test", Col1 = "tset" }
        };

            public async override Task ReadAsync(DataManagerRequest dm, string key = null)
            {
                var dataSource = Data;
                if (dm.Search != null && dm.Search.Count > 0)
                {
                    // Searching
                    dataSource = DataOperations.PerformSearching(dataSource, dm.Search);
                }
                if (dm.Sorted != null && dm.Sorted.Count > 0)
                {
                    // Sorting
                    dataSource = DataOperations.PerformSorting(dataSource, dm.Sorted);
                }
                if (dm.Where != null && dm.Where.Count > 0)
                {
                    // Filtering
                    dataSource = DataOperations.PerformFiltering(dataSource, dm.Where, dm.Where[0].Operator);
                }
                int count = dataSource.Count();
                if (dm.Skip != 0)
                {
                    //Paging
                    dataSource = DataOperations.PerformSkip(dataSource, dm.Skip);
                }
                if (dm.Take != 0)
                {
                    dataSource = DataOperations.PerformTake(dataSource, dm.Take);
                }
                return dm.RequiresCounts ? new Syncfusion.Blazor.Data.DataResult() { Result = dataSource, Count = count } : (object)dataSource;
            }
            public override async Task InsertAsync(DataManager dataManager, object data, string key)
            {
                await Task.Delay(5000);
                return data;
            }
            public override async Task RemoveAsync(DataManager dataManager, object data, string keyfield, string key)
            {
                await Task.Delay(5000);
                return data;
            }
            public override async Task UpdateAsync(DataManager dataManager, object data, string keyfield, string key)
            {
                await Task.Delay(5000);
                return data;
            }
        }


component.razor
@page "/component" 
@code {
    public class Row
    {
        public string Col1 { get; set; }
        public string Col2 { get; set; }
    }
}
   
   
       
   
   
       
       
       
           
               
           
       
   

9 Replies 1 reply marked as answer
JP Jeevakanth Palaniappan Syncfusion Team February 24, 2021 06:33 PM UTC

Hi Allen, 

Greetings from Syncfusion support. 

We have checked your query and we would like to inform you that by default, during the update/delete action, we will show/hide the spinners. Incase if the records gets updated/deleted quickly then the spinner gets shown/hidden quickly in the UI. Please refer the below video demo and sample in which we have shown the spinner loading before the action gets completed. 



Please get back to us if you have any other queries. 

Regards, 
Jeevakanth SP. 


AC Allen Cook February 25, 2021 03:07 PM UTC

With the sample code I have given I am not getting this behavior.

JP Jeevakanth Palaniappan Syncfusion Team March 2, 2021 10:33 AM UTC

Hi Allen, 

We have changed the Read, Insert, Update, Delete methods to ReadAsync, InsertAsync, UpdateAsync, DeleteAsync and also added the Task.Delay but still we are unable to reproduce the reported problem. Also we would like to inform you that the return type of these methods should be Task<object>. Please refer the below validated sample for your reference. 


If you are still facing the reported problem then kindly share us the below details, 

  1. Share us the Syncfusion NuGet version details.
  2. Kindly share us the simple runnable issue reproducing sample or reproduce the issue in the above provided sample.

The above requested details will be helpful for us to validate the issue and provide you with a better solution as early as possible. 

Regards, 
Jeevakanth SP. 


AC Allen Cook March 2, 2021 03:43 PM UTC

Please validate with WASM Blazor. I am using Syncfusion.Blazor 18.4.0.35


JP Jeevakanth Palaniappan Syncfusion Team March 3, 2021 06:02 AM UTC

Hi Allen, 

We have checked the reported problem in WASM application in both 18.4.0.35 and 18.4.0.46 version but still we are unable to reproduce the reported problem. Please find the validated sample below, 
 
 
If you are still facing the reported problem then kindly share us the below details to proceed further. 

  1. Kindly share us the simple runnable issue reproducing sample or reproduce the issue in the above provided sample.
  2. Share us the video demo of the issue.

Regards, 
Jeevakanth SP. 


AC Allen Cook March 8, 2021 08:12 PM UTC

I have taken your example and tested and have been able to reproduce the issue. Please see the attached recording.



Attachment: Spinner_not_showing_while_pending_edit_8de5be95.zip

JP Jeevakanth Palaniappan Syncfusion Team March 9, 2021 01:25 PM UTC

Hi Allen, 

By default, the grid will show and hide spinner while performing CRUD operation. But if the operation get performed quickly then we cannot able to see the spinner loading in the Ui due to its reaction time. So if you want to show spinner for 5 seconds then you have render SfSpinner component separately and show/hide the spinner in the OnActionBegin and OnActionComplete event of the grid. 

Please refer the below code snippet and the reference links. 



<SfSpinner @bind-Visible="show" Target="container"></SfSpinner> 
 
//set your target based on your requirement 
 
    <SfGrid @ref="Grid" TValue="Row" ID="Grid" AllowSorting="true" AllowFiltering="true" AllowPaging="true" 
            Toolbar="@(new List<string>() { "Add", "Delete", "Edit","Update", "Cancel" })"> 
       <GridEvents TValue="Row" OnActionBegin="ActionBegin" OnActionComplete="ActionComplete"></GridEvents> 
      
        </GridColumns> 
    </SfGrid> 
 
@code{ 
 
 
        public async Task ActionBegin(ActionEventArgs<Row> args) 
        { 
            if (args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Save)) 
            { 
               show = true;                
                await Task.Delay(5000); 
            } 
        } 
 
        public async Task ActionComplete(ActionEventArgs<Row> args) 
        { 
            if (args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Save)) 
            { 
               show = false; 
           } 
        } 
 
} 


Regards, 
Jeevakanth SP. 


Marked as answer
AC Allen Cook March 10, 2021 06:36 PM UTC

By default, the grid will show and hide spinner while performing CRUD operation. If this is true then the delayed adaptor, that is simulating a long running CRUD operation, should be showing the spinner.


JP Jeevakanth Palaniappan Syncfusion Team March 11, 2021 11:22 AM UTC

Hi Allen, 

We have already shared a video demo on Feb 24th update which showing the spinner while performing the CRUD operation. You can also check it by defining OnActionBegin/OnActionComplete event and when these events gets triggered, the grid will be showing the spinner and once the corresponding action gets completed the spinner will be hidden. So kindly refer the Feb 24th update for your reference. 

In case if you want to do any customization in spinner then kindly refer the March 9th update. 

Regards, 
Jeevakanth SP. 


Loader.
Up arrow icon