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>
5 Answers, 1 is accepted
Rank 2
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.
Rank 2
I appreciate your help...
Rank 2
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>
Rank 2
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>
Rank 2