Dialog template - progress spinner

Question

When using a dialog template , how do we incorporate a spinner when the add or edit button is clicked?

Monisha Saravanan · Answer

Hi Barry,Greetings from Syncfusion support.We suspect that you want to show/hide spinner while opening the dialog. If so, then you can use ShowSpinnerAsync and HideSpinnerAsync methods of the Grid to show/hide grid’s spinner programmatically based on your requirement. Here we have used ActionBegin/ActionComplete event of DataGrid to Show/Hide spinner. Also we would like to inform that action events will trigger for every CRUD operation in DataGrid. Kindly refer the attached code snippet and sample for your reference. @code{ SfGrid Grid; public async Task ActionBegin(ActionEventArgs args) { if((args.RequestType == Syncfusion.Blazor.Grids.Action.Add) || (args.RequestType == Syncfusion.Blazor.Grids.Action.BeginEdit) ) { await Grid.ShowSpinnerAsync(); } } public async Task ActionComplete(ActionEventArgs args) { if((args.RequestType == Syncfusion.Blazor.Grids.Action.Add) || (args.RequestType == Syncfusion.Blazor.Grids.Action.BeginEdit) ) { await Grid.HideSpinnerAsync(); } } Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-1852717621.ziphttps://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_HideSpinnerAsynchttps://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShowSpinnerAsynchttps://blazor.syncfusion.com/documentation/spinner/getting-startedOther reference: https://blazor.syncfusion.com/documentation/datagrid/editing#event-trace-while-editinghttps://blazor.syncfusion.com/documentation/datagrid/events#onactionbeginhttps://blazor.syncfusion.com/documentation/datagrid/events#onactioncompleteKindly get back to us if you have further queries.Regards,Monisha

Mark Meyer · Answer

Hi , Thanks for your response, this is however not what I want.

I need the spinner to show when you click on the add or edit button in the dialog template.

So when you click add on the toolbar, the dialog pops open, you fill in your details in the dialog, then press add , then I want a spinner to show so that the user is not just staring at a dialog for a few seconds.

Thanks

Renjith Singh Rajendran · Answer

Hi Barry,When you
press on Save button in the Edit/Add dialog the OnActionBegin event will be
triggered. So, based on this scenario, you can show spinner based on RequestType
as Save in OnActionBegin event handler. We suggest you to refer
the below documentation for more details on event tracing during CRUD in grid.https://blazor.syncfusion.com/documentation/datagrid/editing#event-trace-while-editingPlease
refer the code below,

public async Task ActionBegin(ActionEventArgs<OrdersDetails> args)
      {
         if((args.RequestType == Syncfusion.Blazor.Grids.Action.Save))
          {
             
  await Grid.ShowSpinnerAsync();
         
  }
      }

Please get
back to us if you need further assistance.Regards,Renjith R

Mark Meyer · Answer

I think the problem I am having is while the above works, the response time is still a little long. I think I would prefer if there was a instant way of providing a spinner feedback.

Could you use JavaScript somehow tied to the button click that provides a faster response?

Monisha Saravanan · Answer

Hi Barry,Thanks for the update.We have checked your query and we suggest you to call ShowSpinnerAsync on actionbegin event of request type save. Here we have handled footer template in which EndEditAsync is called to save the changes in DataGrid. When EndEdit is called then the spinner will hide by default. Kindly check the attached code snippet and sample for your reference. Text Save Cancel @code{ public async Task Save() { await Grid.ShowSpinnerAsync(); await Grid.EndEditAsync(); } public async Task Cancel() { await Grid.CloseEditAsync(); } public async Task ActionBegin(ActionEventArgs args) { if((args.RequestType == Syncfusion.Blazor.Grids.Action.Save)) { await Grid.ShowSpinnerAsync(); } } } Also you can render your custom spinner component and then show/hide the customized spinner by using the Grid events(OnLoad, DataBound, OnActionBegin etc.), which will be triggered for each corresponding actions in Grid.Reference : https://blazor.syncfusion.com/documentation/spinner/getting-started/#initializationhttps://blazor.syncfusion.com/demos/spinner/overview?theme=bootstrap4https://blazor.syncfusion.com/documentation/datagrid/events/sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp11124535974.zipKindly get back to us if you have further queries.Regards,Monisha