Search code examples
c#asp.netajaxajaxcontroltoolkit

TabContainer using AjaxToolKit


Before I had a problem of findhing the control and setting the tab index. My problem now is that depending if there is data in some of the tabs they are set to Visible = true or false. If there is no data they are not visible (the tab that is) but the container and any of the other tabs that do have data are shown.

So when I do

$find('<%=myTabs.ClientID%>').set_activeTabIndex(1);

It gives me error because for that particular item there is no data in tab 0 so the tab I want to set now is at index 0 since the tab I want to set would move an index down. How can I know in which index this tab is at, using javascript?

Related code:

function getFocus() {

    //need to be able to find out at which index pnlTab2 is at.. so i can set it
    $find('<%=myTabs.ClientID%>').set_activeTabIndex(1);
    document.getElementById('<%=pnlTab2.ClientID%>').focus();
return false;

}

<asp:UpdatePanel ID="UpdatePnl" runat="server" UpdateMode="Conditional">
        <ContentTemplate>     
            <ajaxToolKit:TabContainer runat="server" id="myTabs" CssClass="CustomTabStyle">
            <ajaxToolKit:TabPanel ID="pnlTab1" runat="server" HeaderText="Tab 1">                                                  
            <ContentTemplate> 
                <table> 
                    <tr>                           
                        <td>                 
                            <div class="Tab1">                     
                                <asp:Label ID="lblPnl1" runat="server"></asp:Label>                                                   
                            </div>                              
                        </td>
                    </tr>   
                </table> 
            </ContentTemplate>             
            </ajaxToolKit:TabPanel>

            <ajaxToolKit:TabPanel ID="pnlTab2" runat="server" HeaderText="Tab2">               
            <ContentTemplate>              
                <table>
                    <tr>
                        <td>
                            <div class="Tab2">                     
                                <asp:Label ID="lblPnl2" runat="server"></asp:Label>                       
                            </div>
                        </td>
                    </tr>
                </table>
            </ContentTemplate>
           </ajaxToolKit:TabPanel>
 </ajaxToolKit:TabContainer>
    </ContentTemplate>
</asp:UpdatePanel>

SO basically, how can i find the index of a TabPanel so that I can set the activeTab to the index found?

=========================================================================


Solution

  • function setFocus() {
            var success = false;
            var tabInedx = 0;
            var tabs = $find("<%= myTabs.ClientID %>").get_tabs();
            for (; tabInedx < tabs.length; tabInedx++) {
                if (tabs[tabInedx].get_id() == "<%= pnlTab2.ClientID %>") {
                    success = true;
                    break;
                }
            }
    
            if (success) {
                alert("Tab2 index: " + tabInedx)
            }
        }