locked
how to avoid Set focus on Tab Panel Hearder? RRS feed

  • Question

  • User-788296554 posted

    I am using AJAX Tab Container Control for my Web app. with 8 Tabs(Tab Panels) in it.
    Using Javasctipt, I have prevented the user from clicking the tab panel header to navigate on tabs
    instead I let them navigate using buttons(Previous & Next).

    But my problem is when a certain tab was activated, the System automatically set its focus on the header of active panel
    instead of the first control within the active panel.

    Tuesday, January 23, 2018 2:24 AM

All replies

  • User2103319870 posted

    louiejay915

    instead of the first control within the active panel.

    You can Subscribe to OnClientAcitveTabChanged event and then set the focus of controls like below

    	<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    		<ajaxToolkit:TabContainer ID="TabContainer1" runat="server" OnClientActiveTabChanged="setFocus">
    			<ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1">
    				<ContentTemplate>
    					<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
    					<asp:Button ID="Button1" runat="server" Text="Button" />
    				</ContentTemplate>
    			</ajaxToolkit:TabPanel>
    			<ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
    				<ContentTemplate>
    					<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
    				</ContentTemplate>
    			</ajaxToolkit:TabPanel>
    			<ajaxToolkit:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3">
    				<ContentTemplate>
    					<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox><br />
    				</ContentTemplate>
    			</ajaxToolkit:TabPanel>
    		</ajaxToolkit:TabContainer>

    Code to set focus on Textbox controls

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    	<script type="text/javascript">
    
    		function setFocus(sender, e) {
    			$("[id*=TextBox3]").focus();
    			$("[id*=TextBox1]").focus();
    			$("[id*=TextBox2]").focus();
    		}
    
    	</script>

    Demo

    Tuesday, January 23, 2018 3:15 AM
  • User-788296554 posted

    Thanks for your Reply Sir A2H.

    I come up for a solution regarding this issue. using this code:

     <script type="text/javascript">
    
     function SetFocusOwnership() {
                    var ddlOwnership = $("#<%=_oDDL_oTextBoxOwnership.ClientID%>");
                    ddlOwnership.focus();
                } 
    
                function pageLoad() {
                    SetFocusOwnership();
                }
    
    
    </script>

    However,  there is another issue, the tab header itself is still be able to get focus via the tab key. What I really wanted to do is to totally avoid the Tab Panel Header from getting its focus even via Tab key.

    Is there a way to do this?

    Thursday, January 25, 2018 3:53 AM
  • User-1838255255 posted

    Hi louiejay915,

    According to your description, you want to disable tab key to focus tab, you could through JS to disable tab key, for more details, please check the following sample code:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    $(document).keydown(function(objEvent) { if (objEvent.keyCode == 9) { //tab pressed objEvent.preventDefault(); // stops its action } })

    Best Regards,

    Eric Du 

    Friday, January 26, 2018 9:13 AM