Tab header not being selected

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

    Posted 09 Feb 2011 Link to this post

    I have a tabstrip control with 5 tabs and one multiview.

    When I execute the client side js to enable and select a specific tab, the view gets selected fine, but the tab header doesn't get selected. During debugging, I have verified that the text coming back is "Sec Ins". I have also verified by the attachment, that before the "tab.enable()" was hit the "enabled" property was "false". After passing that code to enable the tab, you can see it says it's "enabled". Another attachment is how the screen looks after the js funtion is completed as I have explained above. I have also tried the findTabByValue method getting the same results.

    How can I enable & select the tab header to correspond to the selected view?

    Here is my html: Notice the bolding...
    <code>
    <telerik:RadTabStrip ID="tsPatientDemographics" runat="server" AutoPostBack="false"
                                                                                        ScrollButtonsPosition="Right" MultiPageID="RadMultiPage1" BackColor="Gray" CausesValidation="False"
                                                                                        Align="Left" Width="100%">
                                                                                        <Tabs>
                                                                                            <telerik:RadTab Text="P<u>a</u>tient" AccessKey="A" Width="60px">
                                                                                            </telerik:RadTab>
                                                                                            <telerik:RadTab Text="G<u>u</u>arantor" AccessKey="U" Width="80px">
                                                                                            </telerik:RadTab>
                                                                                            <telerik:RadTab Text="<u>P</u>ri Ins" AccessKey="P" Width="60px">
                                                                                            </telerik:RadTab>
                                                                                            <telerik:RadTab Text="<u>S</u>ec Ins" AccessKey="S" Value="Sec Ins" Width="60px"
                                                                                                Enabled="false">
                                                                                            </telerik:RadTab>
                                                                                            <telerik:RadTab Text="<u>T</u>er Ins" AccessKey="T" Value="Ter Ins" Width="70px"
                                                                                                Enabled="false">
                                                                                            </telerik:RadTab>
                                                                                        </Tabs>
                                                                                    </telerik:RadTabStrip>
                                                                                    <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" ScrollBars="None">
                                                                                        <telerik:RadPageView ID="RadPatientInfoView" runat="server" Width="100%" BackColor="LightGray">
                                                                                            <table width="100%" bgcolor="#F6F6F6" cellpadding="0" cellspacing="0">

    </code>

    Here is my js:
    <code>
    function selectSecTab() {
                    var tabStrip = $find("<%= tsPatientDemographics.ClientID %>");
                    var tab = tabStrip.findTabByText("Sec Ins");
                    tab.enable();
                    tab.select();
                   
                }

    </code>
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 10 Feb 2011 Link to this post

    Hello William,

     This behavior is because the client state is not preserved after the postBack. By using the trackChanges and commitChanges methods of the client-side RadTabStrip object, these changes can persist after a postback.

    javascript:
    function selectSecTab()
      {
          var tabStrip = $find("<%= tsPatientDemographics.ClientID %>");
          tabStrip.trackChanges()
          var tab = tabStrip.findTabByText("Sec Ins");
          tab.enable();
          tab.select();
          tabStrip.commitChanges();
      }

     If you don't want a postback, instead of changing your code, simply cancel the postback when calling the function like below. 

    aspx:
    <asp:button runat="server" text="selecttab"  OnClientClick="selectSecTab();return false;" />
     
    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bill
    Bill avatar
    175 posts
    Member since:
    Apr 2010

    Posted 10 Feb 2011 Link to this post

    Thanks Shinu. I chose the second option.

    I appreciate your help...
  5. Bill
    Bill avatar
    175 posts
    Member since:
    Apr 2010

    Posted 10 Feb 2011 Link to this post

    Shinu, after more testing, the second option doesn't work... I did put the "return false" on my OnCliencClick event, and the tab was enabled & selected fine. However, after pressing the Submit button again to submit the page, it seems that the return false for the OnCliencClick event overrides anything else in the js function even if I return true from the js function, the Onclientclick event has the return false on it which executes last. Even though the user now wants to submit the page, it doesn't get submitted because of the "return false". If I take the "return false" away from the OnCliencClick event and try now to submit the page, it works fine. But, leaving it that way does not select the tab client side.

    The logic is when the user clicks on the submit button and wants to change tabs, I do return false from within my js function. When the user hits the submit button and doesn't want to select another tab, I return true.

    That's why I have the "return true" or "return false" in my js function for these multiple scenarios(see below). Having a return false on the OnClicntClick event is not going to saisfy each condition. I have verified that it hits the bolded "return false" when another tab tries to get selected. Once this is hit and fails (as explained before), submitting the page doesn't happen.

    Having the form postback when the user selects another tab (your first option) is really not a viable option since this is a high volume page.

    I still need to know how I can enable & select the tab client side tab and also be able to submit the page..... The js function below should work fine if I'm returning "false" which I have verified.

    <code>

    function CheckForOtherIns() {

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

                    hdnOtherIns.value = "0";

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

                        if (selectedTabValue == "Pri Ins") {
                            if (confirm("Is there Secondary or Tertiary Insurance information available?" + '\n' + "Press OK if Yes or CANCEL if No.")) {
                                selectSecTab();
                                hdnOtherIns.value = "1";
                                return false;
                            }
                            else {
                                return true;
                            }
                        }
                        else if ((selectedTabValue == "Sec Ins") && (secInsCode.value == ""))
                            if (confirm("Is there Secondary Insurance information available?" + '\n' + "Press OK if Yes or CANCEL if No.")) {
                            selectSecTab();
                            hdnOtherIns.value = "2";
                            return false;
                        }
                        else {
                            return true;
                        }
                        else if ((selectedTabValue == "Sec Ins") && (secInsCode.value != ""))
                            if (confirm("Is there Tertiary Insurance information available?" + '\n' + "Press OK if Yes or CANCEL if No.")) {
                            selectTerTab();
                            hdnOtherIns.value = "2";
                            return false;
                        }
                        else {
                            return true;
                        }
                        else if ((selectedTabValue == "Ter Ins") && (terInsCode.value == ""))
                            if (confirm("Is there Tertiary Insurance information available?" + '\n' + "Press OK if Yes or CANCEL if No.")) {
                            selectTerTab();
                            hdnOtherIns.value = "3";
                            return false;
                        }
                        else {
                            return true;
                        }
                    }
                }

                // wyeager - 10/13/2010
                function selectSecTab() {
                    var tabStrip = $find("<%= tsPatientDemographics.ClientID %>");
                    //tabStrip.trackChanges()
                    var tab = tabStrip.findTabByText("Sec Ins");
                    tab.enable();
                    tab.select();
                    //tabStrip.commitChanges();
                }

                // wyeager - 10/13/2010
                function selectTerTab() {
                    var tabStrip = $find("<%= tsPatientDemographics.ClientID %>");
                    //tabStrip.trackChanges()
                    var tab = tabStrip.findTabByText("Ter Ins");
                    tab.enable();
                    tab.select();
                    //tabStrip.commitChanges();
                }


    </code>
  6. Bill
    Bill avatar
    175 posts
    Member since:
    Apr 2010

    Posted 14 Feb 2011 Link to this post

    Shinu, I retested again and confirmed that the js function is defintiely not returning "false" for some reason to the click event. As the code is right now, the postback occurs (it should not, because I am returning false) and then the tab is not selected (all while trying to do it client side - without the track & commit changes method of the tabstrip).

    When I include just the return false without the "selectSecTab()" js fucntion, it still doesn't return false even though I can tell by debugging it is indeed hitting that spot. When I remove the RadAjaxLoadingPanel plus the DefaultLoadingPanelID on the RadAjaxManager, it doesn't post back... So, I know it's returning false, but the tab is still not selected.

    I have even tried to comment out the function and place the code where I want to select the tab, but it still doesn't work (see pertinent code below). Do you have any update on this?

    <html on RadAjaxManager>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="LoadingPanel1">
    </html on RadAjaxManager>

    <html RadAjaxLoadingPanel>
    <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" BackgroundPosition="Center"
                                                                                    IsSticky="true" Style="position: absolute;" Skin="Windows7" Width="350px" Height="80px">
                                                                                    <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/Windows7.gif"></asp:Image>
                                                                                    <br />
                                                                                    <asp:Label ID="Label2" runat="server" ForeColor="Red" Font-Bold="true">WORKING... </asp:Label>
                                                                                </telerik:RadAjaxLoadingPanel>
                                                                                <asp:Button ID="btnSaveLogEntry" runat="server" Text="Save Log Entry" Enabled="true"
                                                                                    AccessKey="L" Style="width: 150px; font-size: x-smaller; color: #fe8e14; font-style: italic;
                                                                                    font-family: Arial Black; font-weight: bold;" OnClick="btnSaveLogEntry_Click"
                                                                                    OnClientClick="CheckForOtherIns();" />
                                                                                <asp:Button ID="btnVoid" runat="server" Text="VOID" AccessKey="V" CausesValidation="false"
                                                                                    Style="width: 150px; font-size: x-smaller; color: #fe8e14; font-style: italic;
                                                                                    font-family: Arial Black; font-weight: bold;" />
                                                                                <asp:Button ID="btnPend" runat="server" Text="PEND" AccessKey="N" CausesValidation="false"
                                                                                    Style="width: 150px; font-size: x-smaller; color: #fe8e14; font-style: italic;
                                                                                    font-family: Arial Black; font-weight: bold;" />
                                                                                <asp:Button ID="btnDEF" runat="server" Text="DEF" AccessKey="F" CausesValidation="false"
                                                                                    Style="width: 150px; font-size: x-smaller; color: #fe8e14; font-style: italic;
                                                                                    font-family: Arial Black; font-weight: bold;" />
    </html RadAjaxLoadingPanel>

    <js>
    if (selectedTabValue == "Pri Ins") {
                            if (confirm("Is there Secondary or Tertiary Insurance information available?" + '\n' + "Press OK if Yes or CANCEL if No.")) {
                                //selectSecTab();
                                var tabStrip = $find("<%= tsPatientDemographics.ClientID %>");
                                var tab = tabStrip.findTabByText("Sec Ins");
                                tab.enable();
                                tab.select();
                                hdnOtherIns.value = "1";
                                return false;
                            }
                            else {
                                return true;
                            }
                        }
    </js>
  7. Bill
    Bill avatar
    175 posts
    Member since:
    Apr 2010

    Posted 17 Feb 2011 Link to this post

    Telerik, any update on this issue?
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017