[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 580
  • Last Modified:

Ajax UpdateProgress inside Tab Control

I want to place an updateprogress inside every tab of an ajax tab control. It works but it triggers the OnActiveTabChanged event of tab control twice on every tab change.

You may see the test page below.
<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div style="height: 100%;">
        <asp:UpdatePanel ID="up_test" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <atk:TabContainer runat="server" Height="150px" ID="tc_test" OnActiveTabChanged="TabFunction"
                    AutoPostBack="true">
                    <atk:TabPanel ID="TabPanel1" runat="server" HeaderText="Tab Page 1">
                        <HeaderTemplate>
                            Tab Page 1
                        </HeaderTemplate>
                        <ContentTemplate>
                            <asp:UpdateProgress ID="uprg_test" AssociatedUpdatePanelID="up_test" runat="server"
                                DisplayAfter="0">
                                <ProgressTemplate>
                                    <div style="height: 100%; background-color: Fuchsia; position: absolute; left: 0;
                                        top: 20px; padding: 0; width: 100%;">
                                        LOADING...
                                    </div>
                                </ProgressTemplate>
                            </asp:UpdateProgress>
                            <asp:Literal ID="Literal1" runat="server"></asp:Literal>
                        </ContentTemplate>
                    </atk:TabPanel>
                    <atk:TabPanel ID="TabPanel2" runat="server" HeaderText="Tab Page 2">
                        <ContentTemplate>
                            <asp:UpdateProgress ID="uprg_test2" AssociatedUpdatePanelID="up_test" runat="server"
                                DisplayAfter="0">
                                <ProgressTemplate>
                                    <div style="height: 100%; background-color: Navy; position: absolute; left: 0;
                                        top: 20px; padding: 0; width: 100%;">
                                        LOADING...
                                    </div>
                                </ProgressTemplate>
                            </asp:UpdateProgress>
                            <asp:Literal ID="Literal2" runat="server"></asp:Literal>
                        </ContentTemplate>
                    </atk:TabPanel>
                </atk:TabContainer>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>

Public Sub TabFunction(ByVal sender As Object, ByVal e As EventArgs)
        Select Case tc_test.ActiveTabIndex
            Case 0
                Literal1.Text = Now.ToString
            Case 1
                Literal2.Text = Now.ToString
        End Select
        System.Threading.Thread.Sleep(2000)
        up_test.Update()
    End Sub

Open in new window

0
emresamisuzer
Asked:
emresamisuzer
  • 2
1 Solution
 
masterpassCommented:
In the page_load, have a !IsPostBack Check

if(!IsPostBack)
{
// rest of the code in page_load here
}

If this is not working .. post your page_load here
0
 
emresamisuzerAuthor Commented:
There is no page_load block.
0
 
masterpassCommented:
As a work around, you could do some thing like this

<atk:TabContainer runat="server" height="150px" id="tc_test" autopostback="true">

</atk:TabContainer

Nb: I have removed the OnActiveTabChanged event
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    If IsPostBack Then
        TabFunction()
    End If
End Sub



Public Sub TabFunction()
    Select Case tc_test.ActiveTabIndex
        Case 0
            Literal1.Text = DateTime.Now.ToString()
            Exit Select
        Case 1
            Literal2.Text = DateTime.Now.ToString()
            Exit Select
       
       
    End Select
End Sub

Open in new window

0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now