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

[Solved] Tab Strip and Panel Bar not responding to clicks

9 Answers 218 Views

TabStrip

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

This question is locked. New answers and comments are not allowed.

Justin Bigelow asked on 12 Nov 2009, 08:42 PM

Hello,

I am attempting to implement the 2009 Q3 MVC extensions. I initially tried to add the tab strip control to my View. It rendered properly however instead of being able to click on different tabs to hide/reveal different content sections the currently selected tab remained the same and this "#TabStrip-2" was appended to the end of the url. Running the sample project included worked properly, with tabs switching and nothing appended to the url. Using Firebug I saw that I was getting the following error:

"jQuery("#TabStrip").tTabStrip is not a function"

I moved the Telerik().ScriptRegistrar() method from the bottom of my site.master page to the head of site.master and that error went away. Now there are no javascript errors reported by Firebug however the original behavior persists, the tabs to do not change and href value is appended to the end of the url.

I then tried to implement the PanelBar sample code but got the same behavior: the panels render correctly but clicking on them does not expand or contract them and the href value is appended to the end of the url.

I get the same behavior between Firefox 3.5.5 and IE 8 (in or out of compatibility mode)
My telerik scripts are located in \Scripts\2009.3.1103.0, moving the scripts out of the subfolder does not fix the issue.

Any insight as to what I am doing wrong is appreciated.

9 Answers, 1 is accepted

answered on 13 Nov 2009, 08:13 PM

Thanks for looking into this....

Declared in the site.master <head>:

    
            <% Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.min.css") 
        
                       .Add("telerik.vista.min.css")) 
        
                       .Render(); %>            
        
                <% Html.Telerik().ScriptRegistrar() 
        
                                 .DefaultGroup(group => group.Combined(true).Compress(true)) 
        
                                 .Scripts(script => script 
        
                                     .AddGroup("QSF", qsfScripts => 
        
                                         qsfScripts                                                              
        
                                            .Add("telerik.common.min.js")                                 
        
                                            .Compress(true) 
        
                                            .Combined(true) 
        
                                     ) 
        
                                 )                    
        
                                 .Render(); %>

This is declared within ~/Views/Home/Index.aspx

    
            <% Html.Telerik().TabStrip() 
        
                        .Name("TabStrip") 
        
                        .Items(tabstrip => 
        
                        { 
        
                            tabstrip.Add() 
        
                                .Text("ASP.NET MVC")                 
        
                                .Content(() => 
        
                                {%> 
        
                                    <ul> 
        
                                        <li>Pure ASP.NET MVC components</li> 
        
                                        <li>Completely Open Source</li> 
        
                                        <li>Exceptional Performance</li> 
        
                                        <li>Based on jQuery</li> 
        
                                        <li>Search Engine Optimized</li> 
        
                                        <li>Cross-browser support</li> 
        
                                    </ul> 
        
                                <%}); 
        
                            tabstrip.Add() 
        
                                .Text("Silverlight")                     
        
                                .Content(() => 
        
                                {%> 
        
                                    <ul> 
        
                                        <li>Built on Silverlight 3</li> 
        
                                        <li>RIA services support</li> 
        
                                        <li>Validation support</li> 
        
                                        <li>Out of browser support</li> 
        
                                        <li>The first commercial 3D chart</li> 
        
                                        <li>Free testing framework</li> 
        
                                    </ul> 
        
                                <%}); 
        
                            }) 
        
                        .SelectedIndex(0) 
        
                        .Render(); 
        
                %>

The location of my .css files is ~/content/2009.3.1103.0
The location of my .js files is ~/scripts/2009.3.1103.0