Selecting a Tab from the RadTabStrip

5 posts, 1 answers
  1. Bill
    Bill avatar
    175 posts
    Member since:
    Apr 2010

    Posted 12 Oct 2010 Link to this post

    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();
                            }
                        }
                    }
                }

  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 15 Oct 2010 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bill
    Bill avatar
    175 posts
    Member since:
    Apr 2010

    Posted 18 Oct 2010 Link to this post

    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.
  5. Answer
    Yana
    Admin
    Yana avatar
    4554 posts

    Posted 19 Oct 2010 Link to this post

    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
  6. Bill
    Bill avatar
    175 posts
    Member since:
    Apr 2010

    Posted 19 Oct 2010 Link to this post

    Thanks, that worked fine...
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017