Tab Order (TabIndex)

Has anyone else noticed that in the PopupControlExtender example, if you use the mouse to click on a date, then press Tab thinking you're going to the next control in the TabIndex order, than in fact you start back at the top of the TabIndex order.

For example, I have a table with several TexBox controls on it. Half way across the table's columns, I have a date field that is hooked up to a popup calendar. If I type the date in, and Tab - I go to the next field as expected. If, however, I use the mouse to click on a date on the calendar popup - then press Tab, I'm taken to the start of the table's fields again.

Is there any way to have better control over the TabIndex order here?

Is the situation any better with the 60504 release of the PopupControl? I know Ted made some tabbing changes there so it was possible to tab into the popup...

You can now tab into a textbox and the control will pop up. When you tab out of the textbox, the popup control will not go away, unless you click with your mouse somewhere outside of the textbox/popup control. It would be useful if you could tab in and have the popup control appear, and tab out and have it disappear.

This stems from the inability to find out where focus has gone to in the browser. We can be notified of the lost focus (onblur) on the textbox, but there's no way of knowing where it's gone to. It could be another control on the page, it could be the popup itself, there's no way to tell. Unfortunately the focus management facilities of the DOM are a little lacking.

So that complicated doing this in a clean way. We talked about catching the onkeydown and looking specifically for tab on the textbox but it seemed hacky. If enough people complain, maybe we'll revisit it.

Hey sburke,

I realize this post is old, but I'm just wondering if enough people complained :P

I did use your onkeydown hack to fix the buggyness in the popupcontrolextender SampleWebSite that comes with the control toolkit. However, I also needed to create an onfocus event for the textboxes b/c after setting a Panels display=none when tabbing out, if I shift-tabbed back into the field the popup wouldn't show. This leaves the popupcontrolextender actually doing little more than setting some positional attributes, which I could easily add to my javascript function.

This may have been addressed elsewhere, but are there any new plans on "fixing" this? Or perhaps someone has come up with a better workaround than the onkeydown method... ??

Thanks.

--c--

sorry, make that [visibility=hidden], not [display=none]

Tab Panel

Hello Everyone,

I've been working with the tab panel example in the AJAX Control Toolkit and I have a problem I just cannot seem to solve. How would I cause a click on a specific tab to call a specific function on the C# code behind page? Is this something I can do on the C# side? If not, you might have to give some example code as I'm a newbie at ASP.NET and Javascript. Thanks in advance.

Robert

hi Robert,

The tab Panel/container does not have an autopost back mechanism. So you must do it your self by adding;

"text/javascript"> function ActiveTabChanged(sender, e) { __doPostBack('<%= tc1.ClientID %>', sender.get_activeTab().get_headerText()); }
<scripttype="text/javascript">
function ActiveTabChanged(sender, e)
{
__doPostBack('<%= tc1.ClientID %>', sender.get_activeTab().get_headerText());
}
</script>
andset the OnClientActiveTabChanged="ActiveTabChanged"

The previous answer didn't quite do everything required for you.

Add the following script to your page:

<script type="text/javascript" language="javascript">
function ActiveTabChanged(sender, e)
{
__doPostBack('<%= idofmytabcontainer.ClientID %>', sender.get_activeTab().get_headerText());
}
</script>

Then ensure your markup for the tab container has the following entries:

OnClientActiveTabChanged="ActiveTabChanged" OnActiveTabChanged="ActiveTabChangedServer"

In the page load event of your code behind file add:

ScriptManager1.RegisterAsyncPostBackControl(idofmytabcontainer);

Finally add the ActiveTabChangedServer method to the code behind file:

protected void ActiveTabChangedServer(object sender, EventArgs e)
{
if (idofmytabcontainer.ActiveTab == idoftabpanel1)
{
//Do something in code
}

if (idofmytabcontainer.ActiveTab == idoftabpanel2)
{
//Do something in code
}
}

I hope that helps

Does anyone have a sample tab panel that is working that they can paste below (or e-mail to me)? I'm making a mistake somewhere and cannot figure out where. If I had a sample tab panel that is already working correctly I can work from there. Thanks in advance.

Robert

Robert, the above code worked for me (when I checked it with a break point in Visual Studio), but the msgs I wanted to display didn't display. Then I put in an UpdatePanel around the labels and added a trigger and the messages showed. Here is what I added on the panel that was clicked:

<asp:UpdatePanelID="UpdatePanel7"runat="server">

<ContentTemplate>

<asp:LabelID="lblEmailMsg"runat="server"ForeColor="red"Font-Bold="true"/>

<asp:LinkButtonrunat="server"ID="lbtnAssignEmail"Visible="true"Text="Click here to fix this."/>

</ContentTemplate>

<Triggers>

<asp:AsyncPostBackTriggerControlID="Tabs"EventName="ActiveTabChanged"/>

</Triggers>

</asp:UpdatePanel>

Actually, here is the correct linkbutton control, but it is not really part of the solution. I just was not ready to test the link button yet so I left out the OnClick.

<asp:LinkButtonrunat="server"ID="lbtnAssignEmail"Visible="true"OnClick="OnClickPanel1"Text="Click here to fix this."/>

zoetosis,

I am using masterpages and my script manager is in the masterpage, how do I add the RegisterAsyncPostBackControl in page_load when I am using master pages.

Thanks

In VB:

ScriptManager.GetCurrent(Me.Page).RegisterAsyncPostBackControl([nameoftabcontainer])

tabcontainer by code

i have a ajax tabcontainer

i add tabpanel by code but ,

for example if i have 5 tabs and one is updated content i wanna blink or change the color of tabheader that has been update

Note: that 1 or more tabs can be updated so x tabs must change the color of header or blink

Regards

zulurl

protected void Page_Init(object sender, EventArgs e)
{

AjaxControlToolkit.TabPanel tab = new AjaxControlToolkit.TabPanel();
tab.HeaderText = "test_new_tab";

TabContainer1.Tabs.Add(tab);

tab.Controls.Add(LoadControl("WebUserControl.ascx"));

AjaxControlToolkit.TabPanel tab2 = new AjaxControlToolkit.TabPanel();
tab2.HeaderText = "test_new_tab2" + System.DateTime.Now;

TabContainer1.Tabs.Add(tab2);

tab.OnClientClick = "js";
tab.BackColor = System.Drawing.Color.Red;

{

}

}
with another way how do i refer document.getelementbyid(->the tab added...??
TabID.ClientID