asp.net - Ajax Tookit TabPanel Invisible Tag Bug

Question

I have encountered a slightly bizarre bug while using the ajax control toolkit TabPanel. I have 4 tabs in row like so:

[Tab1][Tab2][Tab3][Tab4]

Now tab 2 should only appear in certain circumstances, and so has its visibility set to false. However while it is invisible, if I was to click on Tab 3, it would load the tab before switching to Tab 1. Similarly selecting tab4 will load tab4 but then immediately switch to tab3. On the server side the ActiveTabChanged event is being hit twice, once for the tab correctly selected, on once for the tab it is switching too.

If I move Tab2 to the end of the row of tabs, everything works fine. Having read up on the toolkit a bit, I presume this is an error to do with the active tab index, and the javascript is setting it to one lower than it should, but I'm not sure how to going about fixing it.

Answer 1

I'm not sure if this is the same issue but it sounds similar to one that i've had for few months. Have a look here for my problem and the solution:

• forums.asp.net: hiding TabContainer TabPanels

I had to fix a Bug in Ajax-Toolkit from PreRender:

Private Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
    'ensure that the Tabs stay invisible that have Visible=False on markup and dont get visible programmatically'  
    Me.TabThatShouldStayInvisible.Visible = False
    FixTabPanelVisible(TabContainer1)
End Sub

Protected Sub FixTabPanelVisible(ByVal tabcontainer As AjaxControlToolkit.TabContainer)
    For Each tp As AjaxControlToolkit.TabPanel In tabcontainer.Tabs
        Dim oldVisible As Boolean = CBool(IIf(IsNothing(ViewState(tp.UniqueID + "_Display")), True, ViewState(tp.UniqueID + "_Display")))
        If Not tp.Visible Then
            ViewState(tp.UniqueID + "_Display") = False
            DisableTab(tabcontainer, tabcontainer.Tabs.IndexOf(tp))
        ElseIf tp.Visible AndAlso Not oldVisible Then
            ViewState(tp.UniqueID + "_Display") = True
            EnableTab(tabcontainer, tabcontainer.Tabs.IndexOf(tp))
        End If
        tp.Visible = True
    Next
    Dim fixScript As New StringBuilder()
    fixScript.Append("function DisableTab(container, index) {$get(container.get_tabs()[index].get_id() + ""_tab"").style.display = ""none"";}")
    fixScript.Append("function EnableTab(container, index) {$get(container.get_tabs()[index].get_id() + ""_tab"").style.display = """";}")
    ScriptManager.RegisterStartupScript(Me, Me.GetType(), "FixScriptReg", fixScript.ToString(), True)
End Sub

Protected Sub EnableTab(ByVal container As AjaxControlToolkit.TabContainer, ByVal index As Integer)
    Dim sFunction As String = "function () {EnableTab($find('" & container.ClientID & "')," & index & ");}"
    ScriptManager.RegisterStartupScript(Me, Me.GetType(), "EnableTabFun" & index, "Sys.Application.add_load(" & sFunction & ");", True)
End Sub

Protected Sub DisableTab(ByVal container As AjaxControlToolkit.TabContainer, ByVal index As Integer)
    Dim sFunction As String = "function () {DisableTab($find('" & container.ClientID & "')," & index & ");}"
    ScriptManager.RegisterStartupScript(Me, Me.GetType(), "DisableTabFun" & index, "Sys.Application.add_load(" & sFunction & ");", True)
End Sub