Re render a tab on demand

[Martin]

I have a tab which displays an image (its actually a spectrogram retrieved from Azure storage).  I have a modal dialog in which I can change some of the spectrogram parameters and recalculate the spectrogram and store the new image back in Azure storage.  

How can I get the tab to to retrieve the new image when I close the modal dialog:  i.e. re render the tab on modal dialog close.    The image is retrieved from Azure via in-line code in "Blazor razor".

The render mode is the default "On demand"

[Satheesh Kumar Balasubramanian]

Hi Martin, 

  

Thanks for using Syncfusion Products. 

  

We have validated your reported query "Re render a tab on demand" and suspect that you need to change the image inside tab dynamically. We have prepared a sample to change the image dynamically inside tab on button click to reproduce the reported issue. But, we were unable to reproduce the issue at our end. Also, please use StateHasChanged to refresh the tab content. 

  

Please find the sample which prepared for your issue - https://www.syncfusion.com/downloads/support/forum/167599/ze/RefreshTab-1221288339 

  

Index.razor: 

<SfButton @onclick="ChangeImage" Content="Change Image"></SfButton> 

<br /> 

<br /> 

  

<SfTab @ref="Tab" CssClass="e-tab-custom-class" LoadOn="ContentLoad.Demand"> 

    <TabItems> 

        <TabItem> 

            <HeaderTemplate> 

                <img class="emp" src=@ChangeContent /> 

            </HeaderTemplate> 

            <ContentTemplate> 

                <img class="emp" src=@ChangeContent /> 

                <div> 

                    Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981.He is fluent in French and Italian and reads German.He joined the company as a sales representative, was promoted to sales manager in January 1992 and to vice president of sales in March 1993.Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association. 

                </div> 

            </ContentTemplate> 

        </TabItem> 

    </TabItems> 

</SfTab> 

  

@code { 

    SfTab Tab; 

    public string ChangeContent = "https://ej2.syncfusion.com/aspnetcore/css/tab/7.png"; 

    void ChangeImage() 

    { 

        ChangeContent = "https://ej2.syncfusion.com/aspnetcore/css/tab/8.png"; 

        this.StateHasChanged(); 

    } 

} 

  

Kindly try the above sample and let us know if this works at your end. If you still face any problem, please share the below details to reproduce the issue which will help us to validate the issue and provide prompt solution as soon as possible. 

• Share the above sample with modifying code to replicate the issue
• Share issue replicating sample if possible
• Share all tab and dialog related code snippets
• Can you please confirm whether you are changing the image in tab header (or) content?

Regards, 

Satheesh Kumar B 

[Martin]

I had to rewrite things a bit to use this approach and then it still didn't work.  But I realised that was because my pop up modified the image at the URL and the URL didn't change so I used the oldtrick of adding a time dependant  url parameter so the URL changed each time the url was referenced which forced the Blazer engine to reload the URL as the URL then changed.

All now works.

Thanks

[Nevitha Ravi]

Hi Martin, 

Thanks for your update. 

We are happy that your issue has been resolved at your end. Please get back to us if you need any further assistance. 

Regards, 

Nevitha