TabContainer Setting Focus to a control inside the TabPanel

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="SearchTabs.ascx.vb" Inherits="UserControls_SearchTabs" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
<div style="text-align:left">

<script type="text/javascript" language="javascript" >
 
var control;
 

function getControl_TabClicked1(sender, e) {  
        control = $get('<%=txtName.ClientID%>');        
}

function getControl_TabClicked2(sender, e) {  
        control = $get('<%=txtAddress.ClientID%>');        
}

function getControl_TabClicked3(sender, e) {  
        control = $get('<%=txtID.ClientID%>');        
}

function getControl_TabClicked4(sender, e) {  
        control = $get('<%=txtAttribute.ClientID%>');      
}
 

function setFocus(sender, e) {  
    control.focus();  
}


 </script>


<ajaxToolkit:TabContainer runat="server" ID="Tabs" CssClass="MyTab" Height="60px" Width="400px" OnClientActiveTabChanged="setFocus" >    
    <ajaxToolkit:TabPanel runat="Server" ID="panName" HeaderText="By Name" ScrollBars="auto" OnClientClick="getControl_TabClicked1">                        
        <ContentTemplate>  
             <asp:UpdatePanel ID="updateTab1" runat="server" >
                <ContentTemplate>                                              
                    <table >
                        <tr>
                            <td align="left">Enter Business Name</td>
                            <td align="left"><asp:TextBox ID="txtName" runat="server" Width="150px" CssClass="textbox"  TabIndex="1" /></td>
                            <td align="center">
                                <asp:Button ID="btnName" runat="Server" Text="Search" CssClass="textbox"/>
                            </td>
                        </tr>                      
                        <tr>
                            <td colspan="3" align="left">Enter at least 3 characters from the Business Name</td>
                        </tr>
                    </table>                                                    
               </ContentTemplate>
            </asp:UpdatePanel>                          
        </ContentTemplate>
    </ajaxToolkit:TabPanel>
   
    <ajaxToolkit:TabPanel  runat="Server" ID="panAddress"  HeaderText="By Address" OnClientClick="getControl_TabClicked2">
        <ContentTemplate>
             <asp:UpdatePanel ID="updateTab2" runat="server">
                <ContentTemplate>
                    <table>
                        <tr>
                            <td align="left">Enter Business Address</td>
                            <td align="left"><asp:TextBox ID="txtAddress" runat="server" CssClass="textbox"/></td>
                            <td align="center">
                                <asp:Button ID="btnAddress" runat="Server" Text="Search" CssClass="textbox"/>
                            </td>
                        </tr>                        
                    </table>                    
                </ContentTemplate>
            </asp:UpdatePanel>    
        </ContentTemplate>
    </ajaxToolkit:TabPanel>

    <ajaxToolkit:TabPanel runat="Server" ID="panID" HeaderText="By ID" OnClientClick="getControl_TabClicked3">
        <ContentTemplate>
              <asp:UpdatePanel ID="updateTab3" runat="server">
                <ContentTemplate>
                    <table>
                        <tr>
                            <td align="left">Enter Business ID</td>
                            <td align="left"><asp:TextBox ID="txtID" runat="server" CssClass="textbox"/></td>
                            <td align="center">
                                <asp:Button ID="btnID" runat="Server" Text="Search"  CssClass="textbox"/>
                            </td>
                        </tr>
                        <tr>                            
                            <td colspan="3">
                                <asp:RegularExpressionValidator runat="server" ID="revID" ControlToValidate="txtID" ValidationExpression="^\d+$" ErrorMessage="Must be an integer > 0!" Font-Size="X-Small" SetFocusOnError="true"></asp:RegularExpressionValidator>                            
                                <asp:CompareValidator ID="cvID"  runat="server" ControlToValidate="txtID" ValueToCompare="0" Operator="NotEqual" ErrorMessage="Must be an integer > 0!" Font-Size="X-Small" SetFocusOnError="true"></asp:CompareValidator>                                
                            </td>                            
                        </tr>                        
                    </table>                  
              </ContentTemplate>
            </asp:UpdatePanel>  
        </ContentTemplate>
    </ajaxToolkit:TabPanel>
   
    <ajaxToolkit:TabPanel runat="Server" ID="panAttribute" HeaderText="By Attribute" OnClientClick="getControl_TabClicked4">
        <ContentTemplate>
            <asp:UpdatePanel ID="updateTab4" runat="server">
                <ContentTemplate>
                    <table>
                        <tr>
                            <td align="left">Select Attribute</td>
                            <td align="left" colspan="2">
                                <asp:DropDownList ID="ddlAttributes" DataSourceID="AttributesDataSource" DataTextField="text" DataValueField="value" runat="server" CssClass="textbox">
                                </asp:DropDownList>
                                <asp:XmlDataSource ID="AttributesDataSource" runat="server" DataFile="~/XML Files/AttributeNames.xml">
                                </asp:XmlDataSource>
                            </td>
                           </tr>
                           <tr>
                            <td align="left">
                                Enter Value
                            </td>
                            <td align="left">
                                <asp:TextBox ID="txtAttribute" runat="server" CssClass="textbox"></asp:TextBox>                                
                               
                            </td>
                            <td align="center">
                                <asp:Button ID="btnAttribute" runat="Server" Text="Search" CssClass="textbox"/>
                            </td>
                        </tr>                                        
                    </table>                                                                    
               </ContentTemplate>
            </asp:UpdatePanel>
        </ContentTemplate>
    </ajaxToolkit:TabPanel>                      
</ajaxToolkit:TabContainer>

</div>  

 

TabContainer Setting Focus to a control inside the TabPanel

 Place this at the BOTTOM of your ASP.Net Page.  Replace txtPartNo with the name of your control.

<script language="javascript" type="text/javascript">
    Sys.Application.add_load
    (
        function()
        {
            window.setTimeout(focus, 1);
        }
    )
    function focus()
    {
        document.getElementById('<%=txtPartNo.ClientID %>').focus();
    }
</script>

Accordion Arrows

This is one way to have up/down or open/close arrows appear on an AJAX AccordionPane. First add a div and an img to the Header of the AccordionPane along with the title (the example uses ‘Add Widget’).

<cc1:AccordionPane ID="apTest" runat="server" >
<Header>
<div id="div1" onclick="UpDownIcons('imgAcc')">
Add Widget   <img src="Images/arrow_down.ico" id="imgAcc" alt="expand" />
</div>
</Header>

Note the onclick function for the div, that is where the change takes place. Here is the code for the ‘UpDownIcons’ javascript function.

function UpDownIcons(paneImg)
{
var clicked = document.getElementById(paneImg);
var currentIcon;
currentIcon = clicked.src.endsWith('arrow_down.png');
if(currentIcon)
clicked.src='App_Themes/MainTheme/Images/arrow_up.png';
else
clicked.src='App_Themes/MainTheme/Images/arrow_down.png';

var others = document.getElementsByTagName('img');
for(i=0; i<others.length; i++)
{
if(others[i].id!=clicked.id)
others[i].src = 'App_Themes/MainTheme/Images/arrow_down.png';
}
}

The first section of the script is necessary to flip the arrow when a user clicks on the same accordion to close it rather than a different accordion. The loop runs through the other imgs to switch their src.

You would need to change the img src to your image path and you would need to change the ‘arrow_down.ico’ in the currentIcon=img.src.endsWith line to match your icon names. Also this example assumes that this pane would be closed to begin with so the default src is the down arrow icon.

Accordion

<style>
.accordionHeaderWO
{
border: 1px solid #2F4F4F;
color:#FFF;
background-color: #7D1514;
font-size: 12px;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}
.accordionContent
{
background-color: White;
padding: 5px;
padding-top: 10px;
}
.accordionLink
{
background-color: #D3DEEF;
color: white;
}
<style>

----------------------
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<cc1:Accordion ID="Accordion1" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeaderWO"
ContentCssClass="accordionContent" FadeTransitions="true" TransitionDuration="250"
FramesPerSecond="40" AutoSize="None" RequireOpenedPane="true">
<Panes>
<cc1:AccordionPane ID="AccordionPane1" runat="server">
<Header> Rejected Vendor Information</Header>
<Content>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
</Content>
</cc1:AccordionPane>

<cc1:AccordionPane ID="AccordionPane2" runat="server">
<Header>
Comments
</Header>
<Content>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</Content>
</cc1:AccordionPane>

</Panes>
</cc1:Accordion>
</div>
</form>