Selecting a Tab from the RadTabStrip

[Bill]

I want to be able to set client side focus to the first field in a tab once the tab is clicked. I've tried the OnSelectedTab & OnSelectingTab client side events to run a js function, but when I click on one of the tabs, it doesn't get highlighted; nor does it go into my js function. If I take away the js event on the tabstrip, it works fine, but I can't set the focus to the first field. the last two tabs are optional and are disabled by default. They get enabled elsewhere in the code.

Here is my html:
<telerik:RadTabStrip ID="tsPatientDemographics" runat="server" AutoPostBack="false" OnSelectedTab="SetFocus"
                                            ScrollButtonsPosition="Right" MultiPageID="RadMultiPage1"
                                            BackColor="Gray" CausesValidation="False" Align="Left">


Here is my js:

            function SetFocus() {

                var tabStrip = $find("<%= tsPatientDemographics.ClientID %>");
                var selectedTab = tabStrip.get_selectedTab();
                var HospAcctno = document.getElementById("HospAcctno");
                var GuarRelToPat = document.getElementById("GuarRelToPat");
                var priInsCode = document.getElementById("priInsCode");
                var secInsCode = document.getElementById("secInsCode");
                var terInsCode = document.getElementById("terInsCode");

                if (selectedTab != null) {
                    var selectedTabValue = selectedTab.get_text();

                    if (selectedTabValue == "Patient") {
                        var HospAcctno = document.getElementById("HospAcctno");
                        HospAcctno.focus();
                    }
                    else if (selectedTabValue == "Guarantor") {
                        var GuarRelToPat = document.getElementById("GuarRelToPat");
                        GuarRelToPat.focus();
                    }
                    else if (selectedTabValue == "Pri Ins") {
                        var priInsCode = document.getElementById("priInsCode");
                        priInsCode.focus();
                    }
                    else if (selectedTabValue == "Sec Ins") {
                        var tabStrip = $find("<%= tsPatientDemographics.ClientID %>");
                        var tab = tabStrip.findTabByText("Sec Ins");
                        if (tab.get_isEnabled == true) {
                            var secInsCode = document.getElementById("secInsCode");
                            secInsCode.focus();
                        }
                    }
                    else if (selectedTabValue == "Ter Ins") {
                        var tabStrip = $find("<%= tsPatientDemographics.ClientID %>");
                        var tab = tabStrip.findTabByText("Ter Ins");
                        if (tab.get_isEnabled == true) {
                            var terInsCode = document.getElementById("terInsCode");
                            terInsCode.focus();
                        }
                    }
                }
            }

[Yana]

Hello William,

You should use OnClientTabSelected event of the tabstrip (not OnSelectedTab) and set the focus in its handler. 

All the best,
Yana
the Telerik team

[Bill]

Yana, that worked fine... thanks...

However, there is one more little item I'm wondering if you could help me with...

When the page loads, I want to be able to set the focus to the first field on the first tab. How can I accomplish this without clicking on the first tab?

I tried executing the same js function, but got an error because of the arguments. It works fine when I'm clicking on the tabs, but want to set focus to the field on the first tab when the page loads.

[Yana]

Hi William,

You just need to set Selected property of the first tab to true and execute the javascript code for focusing the field in OnClientLoad event handler.

Best regards,
Yana
the Telerik team

[Bill]

Thanks, that worked fine...