Loading image in tab

[Albert Shenker]

If I have a pageview with content that gets changed by an ajax update, it would be nice to notify the user that something is changing on that pageview, even if it is not currently visible because a different tab is selected. The typical way to do this would be to display a loading image in the tab next to the tab text. I hae tried the following to include a loading image next to the tab text, however,even though I use IsSticky="true" I am finding it difficult to get the loading image to apear on the same line next to the tab text. Is this possible to do currenlty? If not, and even if it is through some sort of hack, this would be good out-of-the box functionality in the future.

<telerik:RadTab ID="tab3" runat="server" PageViewID="pvDR" Value="Report">
                                                    <TabTemplate>
                                                        Design Report
                                                      <telerik:RadAjaxLoadingPanel id="lpReport" Runat="server" IsSticky="True"><asp:Image id="Image51" runat="server" AlternateText="Loading..." BorderWidth="0px" ImageUrl="~/global/images/loading.gif"></asp:Image></telerik:RadAjaxLoadingPanel>
                                                    </TabTemplate>
                                                </telerik:RadTab>

[Vesko]

Hi Albert,

You'd better move the loading panel outside the TabStrip and it will be shown when you click on the tabs (assuming the tabstrip is ajaxified with RadAjaxManager for example).

Another option would be to show/hide the loading image with client code.

[Albert Shenker]

Thanks for the suggestion, Sean, however, moving the loading image outside of the tab would defeat the purpose of displaying a loading image in the tab. I am not having an issue displaying the image, only getting it to look right without altering the tab appearance. Also, I am not looking to necessarily display the image when the tabs get clicked on (the tabs do not post back), but rather when an ajax update occurs.

For example, I have a tabstrip with three tabs/pageviews. When a user interracts with controls on pageview 1, this updates certain controls which are on pageview 3. There is no inherant way to indicate to the user that something is changing on this other pageview since it is not visible while they are viewing tab 1. This is why it would be nice to display a loading image in tab 3 in response to this ajax update on pageview 1. In this way, the user can see that something happened on Tab 3 which might prompt them to take a look.

Using the tabstrip templateItem example whereby you can add a "close" button to a tab, I am able to place a loading image with IsSticky="True" inside the tab next to the tab text. I am also able to wire it up so this image displays when an ajax update occurs elsewhere. So, essentially, I am able to do what I want. However, when the loading image display, it seems to screw up the tab appearance. I wonder if there is some hack that wil lprevent the loading image from altering the tab appearance, and like I said, wheterh there currently is a way to do this or not, it would be nice out of the box functionality for the tabstrip in the future. You see loading image in tabs throughout tabbed-browsing scenarios in modern browsers, and it can be handy in a number of other ways as well.

[Vesko]

Can you check whether adding style="position:absolute;" to the AjaxLoadingPanel helps?

It seems to be needed when the Sticky property is enabled.