This is a migrated thread and some comments may be shown as answers.

Selecting a Tab from the RadTabStrip

4 Answers 257 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Bill
Top achievements
Rank 2
Bill asked on 12 Oct 2010, 08:46 PM
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();
                        }
                    }
                }
            }

4 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 15 Oct 2010, 01:18 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Bill
Top achievements
Rank 2
answered on 18 Oct 2010, 04:37 PM
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.
0
Accepted
Yana
Telerik team
answered on 19 Oct 2010, 08:12 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Bill
Top achievements
Rank 2
answered on 19 Oct 2010, 06:15 PM
Thanks, that worked fine...
Tags
TabStrip
Asked by
Bill
Top achievements
Rank 2
Answers by
Yana
Telerik team
Bill
Top achievements
Rank 2
Share this question
or