Tab won't change when clicked

2 posts, 0 answers
  1. Bob
    Bob avatar
    10 posts
    Member since:
    Jul 2010

    Posted 13 May 2013 Link to this post

    I'm hoping I have just overlooked something, but I am unable to make the tabstrip behave properly.  When you click on the tabs they don't change.  I pasted the demo (razor) code from this site directly into my view and it still won't work. The tabstrip displays properly, and I am not seeing any javascript errors. Here is the view

    <div id="forecast">
        @(Html.Kendo().TabStrip()
              .Name("tabstrip")
              .Items(tabstrip =>
              {
                  tabstrip.Add().Text("Paris")
                      .Selected(true)
                      .Content(@<text>
                        <div class="weather">
                            <h2>17<span>ºC</span></h2>
                            <p>Rainy weather in Paris.</p>
                        </div>
                        <span class="rainy"> </span>
                      </text>);
     
                  tabstrip.Add().Text("New York")
                      .Content(@<text>
                        <div class="weather">
                            <h2>29<span>ºC</span></h2>
                            <p>Sunny weather in New York.</p>
                        </div>
                        <span class="sunny"> </span>
                      </text>);
     
                  tabstrip.Add().Text("Moscow")
                      .Content(@<text>
                        <div class="weather">
                            <h2>16<span>ºC</span></h2>
                            <p>Cloudy weather in Moscow.</p>
                        </div>
                        <span class="cloudy"> </span>
                      </text>);
     
                  tabstrip.Add().Text("Sydney")
                      .Content(@<text>
                        <div class="weather">
                            <h2>17<span>ºC</span></h2>
                            <p>Rainy weather in Sidney.</p>
                        </div>
                        <span class="rainy"> </span>
                      </text>);
              })
        )
    </div>

    And here is the upper part of the page source:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>Index - TRS Portal</title>
            <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
            <meta name="viewport" content="width=device-width" />
            <link href="/Content/site.css" rel="stylesheet"/>
     
            <script src="/Scripts/modernizr-2.5.3.js"></script>
     
            <link href="/Content/kendo.common.min.css" rel="stylesheet"/>
    <link href="/Content/kendo.default.min.css" rel="stylesheet"/>
     
            <script src="/Scripts/jquery-1.7.1.js"></script>
     
            <script src="/Scripts/kendo.web.min.js"></script>
    <script src="/Scripts/kendo.aspnetmvc.min.js"></script>
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 13 May 2013 Link to this post

    Hi Bob,

    Please make sure you are using a compatible version of jQuery.


    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top