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

Tab not appearing as 'unselected'

2 Answers 80 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
mdk
Top achievements
Rank 1
mdk asked on 04 Nov 2009, 08:59 PM
Hey guys,
First of all,I'm using the entire radcontrol suite Q2 2009 SP1. The problem I'm having is that I have a page with a rad tab strip that seems to be functioning correctly but in IE, when I click on one tab, they both appear with the style of a selected tab. This is not happeneing in FireFox.
Here is my tabstrip definiton:

<

 

telerik:RadTabStrip ID="tabstrip1" runat="server" MultiPageID="RadMultiPage1" SelectedIndex="0" Skin="Simple">

 

 

<Tabs>

 

 

<telerik:RadTab runat="server" Selected="True" Text="Core Curriculum">

 

 

 

</telerik:RadTab>

 

 

<telerik:RadTab runat="server" Text="Organ Systems">

 

 

</telerik:RadTab>

 

 

</Tabs>

 

</

 

telerik:RadTabStrip>
I should say that I have tried several skins and always have the same issue.
Here is an abbreviated version of my multipage setup:

 

<telerik:RadMultiPage id="RadMultiPage1" runat="server" SelectedIndex="0">

    <telerik:RadPageView ID="pageViewCC" runat="server">
  
       <table cellspacing="0" cellpadding="0" width="780" border="0">
          <tbody>
     <tr>
      <td>
       <table border="0" width="100%" cellpadding="7" cellspacing="0" style="background-color:#ffffff;">
        <tr style="padding-bottom:3; padding-left:10; padding-right:10;">
         <td valign="top">
          <span class="font14" style="color:#0f424f;"><b>Browse by Curricular Topics</b></span><br />
          <span class="font11">Find content on our site using this list of topics derived from the ACPE Core Curriculum.</span>
          <br/>

          <table width="100%" cellpadding="0" cellspacing="0" style="background-color:#ffffff;BORDER-RIGHT: #cccccc 1px solid; BORDER-TOP: #cccccc 1px solid; BORDER-LEFT: #cccccc 1px solid; BORDER-BOTTOM: #cccccc 1px solid; margin-top:5px;">
           <tr>
            <td style="height: 36px;" >
             <telerik:RadAjaxPanel ID="rapViewCC" runat="server">
             <table border="0"   style="height:100%" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
              <!-- details deleted -->
               <td id="tdLeft" width="30%" style="min-width:30%;"  class="font12" valign="top" align="left">
                   <table class="CellHolder" bgcolor="#ffffff"  cellspacing="0" cellpadding="0">
                   <tr><td runat="server" id="tdClinicalScience" style="padding-top:3px; padding-right:3px; padding-left:3px;" class="font11noMarginTRLPadding"> <b><asp:LinkButton ID="lnkbtClinicalScience" runat="server" Text="Clinical Science"></asp:LinkButton></b></td></tr>
                   <tr><td runat="server" id="tdAdministrativePharmacySciences" style="padding-top:3px; padding-right:3px; padding-left:3px;" class="font11noMarginTRLPadding"> <b><asp:LinkButton ID="lnkbtAdministrativePharmacySciences" runat="server" Text="Social, Behavioral, &amp; Administrative Pharmacy Sciences"></asp:LinkButton></b></td></tr>
                   <tr><td runat="server" id="tdPharmaceuticalSciences" style="padding-top:3px; padding-right:3px; padding-left:3px;" class="font11noMarginTRLPadding"> <b><asp:LinkButton ID="lnkbtPharmaceuticalSciences" runat="server" Text="Pharmaceutical Sciences"></asp:LinkButton></b></td></tr>
                   <tr><td runat="server" id="tdBasicBiomedicalSciences" style="padding-top:3px; padding-right:3px; padding-left:3px;" class="font11noMarginTRLPadding"> <b><asp:LinkButton ID="lnkbtBasicBiomedicalSciences" runat="server" Text="Basic Biomedical Sciences"></asp:LinkButton></b></td></tr>
                   <tr><td id="tdSpaceHolder" style="height:100%"  class="font11noMarginRLPadding" ></td></tr>
                   </table>
               </td>
               <td style="width:15px;" >&nbsp;</td>
               <td id="td2" valign="top" class="font12" align="left">
               <table>
               
               <tr><td class="font12" style="vertical-align:top;"><div style="float:left;"><asp:Image ID="imgTopic" runat="server" BorderWidth="0" ImageUrl="~/images/icon_bio.gif" /></div>
               
               
               <div style=" color:#660000; float:left; margin-top:13px; padding-left:10px;"><b><asp:Label ID="lblTopicname" runat="server"></asp:Label></b></div></td></tr>
               
                   <tr><td style="padding-left:30px;">
                   <div  style="width:450px;overflow-x:hidden;">
                      <telerik:RadTreeView style="overflow:hidden;"
                      ID="currTopicTreeView"
                      runat="server" ShowLineImages="False"  
                      OnClientMouseOver="onMouseOver"
                      OnClientNodeClicked="ClientNodeClicked" 
                       OnClientNodeClicking = "ClientNodeClicking"
                                                         
                      >
                      </telerik:RadTreeView>
                      </div>
                      <script type="text/javascript"> 
    function onMouseOver(sender, e) 
    { 
        e.get_node().unhighlight();
        //e.get_node().get_textElement().innerHTML = '<span style=\'color:#660000;\'>' + e.get_node().get_text() + '</span>'
    }  
    function ClientNodeClicked(sender, eventArgs)
{  
    var node = eventArgs.get_node();   
   node.unhighlight();
   node.toggle();

function ClientNodeClicking(sender, eventArgs)
{
    eventArgs.get_node().unhighlight();
}

</script> 

                   <br /></td></tr>
                 
               </table>
               </td>
              </tr>
             </table>
             </telerik:RadAjaxPanel>
            </td>
           </tr>
          </table>
         </td>
        </tr>
       </table>
      </td>
     </tr>
       </tbody>
       </table>
      </telerik:RadPageView>
    <telerik:RadPageView ID="pageViewOS" runat="server">
   
    <table border="0" width="780" cellpadding="7" cellspacing="0" bgcolor="#ffffff">
       <tr style="padding-bottom:3; padding-left:10; padding-right:10;"><td>
       <table cellpadding=0 cellspacing=2>
       <tr><td><img src="/images/icon_organ.gif" border="0"></td>
       
       <td><font class="font14" color="#0f424f"><br><b>Browse by Organ Systems</b></font>
          
          <br class="Spacer2">
          <font class="font11">Find content on our site using this list of organ systems, adapted from the <a href='resourceToc.aspx?resourceID=406'> Pharmacotherapy</a> table of contents. For information on additional clinical topics, please SEARCH the full site.</font></td>
       </tr></table>
       
       
       
          
          </td>
       </tr>
        <tr>
         <td colspan=2>
          
          <table width="100%" cellpadding="0"  cellspacing="0" bgcolor="#ffffff" style="height:100%; BORDER-RIGHT: #cccccc 1px solid; BORDER-TOP: #cccccc 1px solid; BORDER-LEFT: #cccccc 1px solid; BORDER-BOTTOM: #cccccc 1px solid">
           <tr>
            <td style="height: 36px" >
             <telerik:RadAjaxpanel ID="rapOS" runat="server">
             <table border="0"   style="height:100%" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
              <tr>
               <td id="tdParentCell" width="200"  class="font12" valign="top" align="left">
               
               <table class="CellHolder" bgcolor="#ffffff"  cellspacing="0" cellpadding="0">
               <asp:Repeater ID="rptParents" runat="server">
                   <!-- details deleted-->
               </asp:Repeater>
               
               </table>
               </td>
               <td width="15" ></td>
               <td id="tdChildCell"  class="font12" valign="top" align="left"> <asp:Label id="lblChild" runat="server"></asp:Label></td>
              </tr>
              
             </table></telerik:RadAjaxpanel>
            </td>
           </tr>
          </table>
         </td>
        </tr>
       </table>
   
    </telerik:RadPageView>
</telerik:RadMultiPage>




Again, it works fine in FF. Has anyone seen this before?

2 Answers, 1 is accepted

Sort by
0
mdk
Top achievements
Rank 1
answered on 05 Nov 2009, 04:39 PM
UPDATE

I just updated to the Q3 2009 suite and I still have the same problem. I also noticed that when I mouse over an unselected tab I get the following javascript error:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 3.0.04506.30; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E)
Timestamp: Thu, 5 Nov 2009 16:34:58 UTC

Message: Sys.ArgumentNullException: Value cannot be null.
Parameter name: element
Line: 3056
Char: 12
Code: 0
URI: http://localhost:3568/ScriptResource.axd?d=PlKL7fyrcN8TDCvcwz2aKdRjEAABSqnSK7LE6I_Z5xTvagneLcptepNUqzVnEwTHEJIqi-mDMKzQ-2QlJg24ZY52vggztadLDExC9K461GQ1&t=7a764cb8

 


I don't think this was there before the upgrade but I'm not sure.
0
Paul
Telerik team
answered on 09 Nov 2009, 08:19 AM
Hello mdk,

We tested your code snippet locally, but everything runs fine. Please find attached a sample web application; give it a try and let us know if we are missing something.

Greetings,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Tags
TabStrip
Asked by
mdk
Top achievements
Rank 1
Answers by
mdk
Top achievements
Rank 1
Paul
Telerik team
Share this question
or