Grid does not show data when browser back button is pressed.

[ajit goel]

We have a similar issue to issue. When the user clicks the back button the syncfusion grid does not show the data. I have verified that the data that is bound to the grid has data in it(see highlighted line below). What could be the issue. I have also shot a video with respect to the issue. 

https://www.loom.com/share/6d1085799cea4a82a0764ed53aa95b88

MakePayment.razor:

<SfGrid AllowTextWrap="true" DataSource="@Pricings">
    <GridColumns>
      <GridColumn HeaderText="Hours">
        <Template>
          @{ var pricing1 = (context as Pricing); @($"{pricing1.minnoofhours} to {pricing1.maxnoofhours} hours") }
        </Template>
      </GridColumn>
      <GridColumn HeaderText="Pricing per hour">
        <Template>
          @{ var pricing2 = (context as Pricing);
            @($"USD {pricing2.pricingperhour}") }
        </Template>
      </GridColumn>
      <GridColumn HeaderText="Discount percentage">
        <Template>
          @{ var pricing3 = (context as Pricing); @($"{pricing3.discountpercentage} %") }
        </Template>
      </GridColumn>
    </GridColumns>
  </SfGrid>

MakePayment.razor.designer.cs:

public partial class MakePaymentComponent : ComponentBase
{
    [Inject]
    protected ILogger<MakePayment> logger { get; set; }
    [Parameter(CaptureUnmatchedValues = true)]
    public IReadOnlyDictionary<string, dynamic> Attributes { get; set; }
    public void Reload()
    {
        InvokeAsync(StateHasChanged);
    }
    public void OnPropertyChanged(PropertyChangedEventArgs args)
    {
    }
    [Inject]
    protected IJSRuntime JSRuntime { get; set; }

    [Inject]
    protected NavigationManager UriHelper { get; set; }

    [Inject]
    protected DialogService DialogService { get; set; }

    [Inject]
    protected TooltipService TooltipService { get; set; }

    [Inject]
    protected ContextMenuService ContextMenuService { get; set; }

    [Inject]
    protected NotificationService NotificationService { get; set; }

    [Inject]
    protected SecurityService Security { get; set; }

    [Inject]
    protected AuthenticationStateProvider AuthenticationStateProvider { get; set; }

    [Inject]
    protected InstaTranscribeDatabaseService InstaTranscribeDatabase { get; set; }

    protected IEnumerable<InstaTranscribeServerSide.Models.InstaTranscribeDatabase.Pricing> Pricings;
    protected override async System.Threading.Tasks.Task OnInitializedAsync()
    {
        try
        {
            await Security.InitializeAsync(AuthenticationStateProvider);
            if (!Security.IsAuthenticated())
            {
                UriHelper.NavigateTo("Login", true);
            }
            else
            {
                await Load();
            }    
        }
        catch (Exception exception)
        {
            this.logger.LogError($"{exception}");
        }
        
    }
    protected async System.Threading.Tasks.Task Load()
    {
        var instaTranscribeDatabaseGetPricingsResult = await InstaTranscribeDatabase.GetPricings();     

Pricings = instaTranscribeDatabaseGetPricingsResult;

    }
    protected async Task NoOfHoursChanged(Syncfusion.Blazor.Inputs.ChangeEventArgs<int?> args)
    {
        NoOfHours = args.Value as int?;
        var pricing=Pricings.FirstOrDefault(x => x.minnoofhours <= NoOfHours && x.maxnoofhours >= NoOfHours);
        var PricePerHour=pricing?.pricingperhour;
        var DiscountPercentage=pricing?.discountpercentage;
        var Total = NoOfHours * PricePerHour;
        
        NoOfHoursText=$"{NoOfHours} hours";
        PricePerHourText=$"{PricePerHour} USD";
        DiscountPercentageText=$"{DiscountPercentage} %";
        TotalText = $"{Total} USD";
    }
    [Inject]
    protected IStripePaymentService StripePaymentService { get; set; }
    protected async System.Threading.Tasks.Task PlaceOrderButtonClick(MouseEventArgs args)
    {
        try
        {
            var session = await this.StripePaymentService.CreateCheckoutSessionAsync(Security.User, NoOfHours);
            await JSRuntime.InvokeVoidAsync("redirectToCheckout", session.Id);
        }
        catch (Exception exception)
        {
            this.logger.LogError($"{exception}");
        }
    }
    protected int? NoOfHours;
    protected string NoOfHoursText;
    protected string PricePerHourText;
    protected string DiscountPercentageText;
    protected string TotalText;
}

[Jeevakanth Palaniappan]

Hi Ajit, 

We have validated your query by using the shared code snippet but unfortunately we are unable to reproduce the reported problem when browser’s back button is pressed. We have attached the video demo and the validated sample for your reference. 

Video - https://www.syncfusion.com/downloads/support/directtrac/general/ze/VideoDemo751180775  

Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp1591499366  

We suggest you to check the issue by adding await Task.Yield() in the OnInitializedAsync method before binding the data to the grid. Please refer the below code snippet for your reference.  

<SfGrid>  

..  

..  

..  

</SfGrid>  

  

@code{  

  

protected override async Task OnInitializedAsync()  

{  

    await Task.Yield();  

var instaTranscribeDatabaseGetPricingsResult = await InstaTranscribeDatabase.GetPricings();    

Pricings = instaTranscribeDatabaseGetPricingsResult; 

// Data bounded here  

}  

}  

If you still face the issue then kindly share the below details, 

1.       Share us the Syncfusion NuGet version details 

2.       Please bind the OnActionFailure event to the grid and share us the stacktrace if any. 

3.       Kindly provide us an issue reproducing sample or reproduce the issue in the provided sample. 

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

Regards, 

Jeevakanth SP.