Hi All,
I have three WebUI.UltraWebTabs like Tab1,Tab2.Tab3.
I want to set focus on each tab header by tabbing and once tab focus reach one of the tab's header it should open by pressing enter button.
Please guid me for this.
Regards,
Varun
Hello Rob,
To open a tab programatically you can use one of the utility functions (igtab_getTabById) and pass in the UltraWebTab's id as a parameter. So for example the UltraWebTab can be setup in the markup like this:
<igtab:UltraWebTab ID="UltraWebTab1" runat="server"> <Tabs> <igtab:Tab Key="Tab1" Text="Tab1"> <ContentTemplate> Test 1 </ContentTemplate> </igtab:Tab> <igtab:Tab Key="Tab2" Text="Tab2"> <ContentTemplate> Test 2 </ContentTemplate> </igtab:Tab> <igtab:Tab Key="Tab3" Text="Tab3"> <ContentTemplate> Test 3 </ContentTemplate> </igtab:Tab> </Tabs></igtab:UltraWebTab>
Each tab can be created and assigned as a key.
In Javascript to set the selected tab would be to retrieve a tab object using the function tabFromKey. In the markup specified contains a key for each tab. Here's an example on opening the 2nd tab programatically:
var UltraWebTab = igtab_getTabById('UltraWebTab1');var tab2 = UltraWebTab.tabFromKey('Tab2');UltraWebTab.setSelectedTab(tab2);
Let me know if this works for you.
Sincerely,Duane HoytDeveloper Support Engineer, MCTSInfragisticshttp://es.infragistics.com/support
Hi Duane,
Thanks for reply.
But this will help to select a particular tab. But my concern is that focus itself not coming on tab header where we will be calling this JS function to
Show it as selected. As we need to open the igtab when we reach there by tabbing .But tab focus is not going on tab header Its directly going inside the controls which we have in each tab. We have lots of control in each tab like drop downs, text boxes.
Function()
{
}
Can you please guide me how to setfocus on igtab header when move through the site with tab button.
Please provide more information on setting the focus on a particular tab header. Where are you finding the onfocus event?
Let me know if you have any questions with this matter. Thank you.
Thanks for the update. When pressing the tab key you may be able to emulate a focus on the tab header with some css styling.
Provide more information on the thread in this particular. Thank you.
Thanks for your feedback.This is working good when we press enter on the document.
But in my case we need to press enter key when we have focus landed on a particular tab like tab1's header and I am not able to identify when the focus is coming there as it does not highlight or put border around that time.
I tried this but not able to find onfocus there to identify the focus is now on the head of a particular tab and now we can press enter to open it.
When we can press enter that is the key because for this code wherever on the page we press enter it will open next tab to current selected tab.
Also on each tab we have submit button as well which is default button selected and when we press enter there it will submit the info rather then selecting the next tab.
Please let me know if you are not clear on this.
Thanks,
Rob
Do you have any further questions on setting the tab selection with using the enter key by handling the onkeypress event?
Let me know if this works for you. Thank you.
In JavaScript you can handle the onkeypress event of the document object so you can define the script under the head tag:
<script type="text/javascript"> document.onkeypress = function() { switch (event.keyCode) { // Enter key is pressed case 13: var UltraWebTab = igtab_getTabById('<%= UltraWebTab1.ClientID %>'); var tabCount = UltraWebTab.Tabs.length; var nextTabIndex = (UltraWebTab.getSelectedIndex() + 1) % tabCount; UltraWebTab.setSelectedIndex(nextTabIndex); break; } }</script>
When the enter key is pressed it will open the next tab by it's selected index.