New to Kendo UI & MVC and ned a little help

3 posts, 0 answers
  1. Mark
    Mark avatar
    3 posts
    Member since:
    Aug 2013

    Posted 22 Aug 2013 Link to this post

    Hi All,

    I'm trying to replicate the demo tabstrip animation functionality in my own project as a proof of concept project whilst trialing the controls.

    However I'm getting the following error:

    Object doesn't support property or method 'kendoTabStrip'

    It's probably a setup issue but am not sure what I'm doing wrong.

    Index.cshtml
    <form class="configuration k-widget k-header">
        <span class="configHead">Animation Settings</span>
        <ul class="options">
            <li>
                <input name="animation" type="radio" @(ViewBag.animation == "toggle" ? "checked=\"checked\"" : "") value="toggle" /> <label for="toggle">toggle animation</label>
            </li>
            <li>
                <input name="animation" type="radio" @(ViewBag.animation != "toggle" ? "checked=\"checked\"" : "") value="expand" /> <label for="expand">expand animation</label>
            </li>
            <li>           
                @Html.CheckBox("opacity", (bool)ViewBag.opacity) <label for="opacity">animate opacity</label>
            </li>
        </ul>
     
        <button class="k-button">Apply</button>
    </form>
     
    <h3>Conversation history</h3>
     
    @(Html.Kendo().TabStrip()
        .Name("tabstrip")
        .HtmlAttributes(new { style = "width:500px" })
        .Animation(animation =>
        {
            animation.Enable(ViewBag.animation == "expand" || ViewBag.opacity);
     
            animation.Open(config =>
            {
                if (ViewBag.animation != "toggle")
                {
                    config.Expand();
                }
     
                if (ViewBag.opacity == true)
                {
                    config.Fade(FadeDirection.In);
                }
     
                config.Duration(AnimationDuration.Fast);
            });
        })
        .SelectedIndex(0)
        .Items(panelbar =>
        {
            panelbar.Add().Text("First Tab")
                    .Content(@<text>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis libero, lobortis ac rutrum quis, varius a velit. Donec lacus erat, cursus sed porta quis, adipiscing et ligula. Duis volutpat, sem pharetra accumsan pharetra, mi ligula cursus felis, ac aliquet leo diam eget risus. Integer facilisis, justo cursus venenatis vehicula, massa nisl tempor sem, in ullamcorper neque mauris in orci.</p>
                    </text>);
     
            panelbar.Add().Text("Second Tab")
                    .Content(@<text>
                        <p>Ut orci ligula, varius ac consequat in, rhoncus in dolor. Mauris pulvinar molestie accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean velit ligula, pharetra quis aliquam sed, scelerisque sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam dui mi, vulputate vitae pulvinar ac, condimentum sed eros.</p>
                    </text>);
         
            panelbar.Add().Text("Third Tab")
                    .Content(@<text>
                        <p>Aliquam at nisl quis est adipiscing bibendum. Nam malesuada eros facilisis arcu vulputate at aliquam nunc tempor. In commodo scelerisque enim, eget sodales lorem condimentum rutrum. Phasellus sem metus, ultricies at commodo in, tristique non est. Morbi vel mauris eget mauris commodo elementum. Nam eget libero lacus, ut sollicitudin ante. Nam odio quam, suscipit a fringilla eget, dignissim nec arcu. Donec tristique arcu ut sapien elementum pellentesque.</p>
                    </text>);
         
            panelbar.Add().Text("Fourth Tab")
                    .Content(@<text>
                        <p>Maecenas vitae eros vel enim molestie cursus. Proin ut lacinia ipsum. Nam at elit arcu, at porttitor ipsum. Praesent id viverra lorem. Nam lacinia elementum fermentum. Nulla facilisi. Nulla bibendum erat sed sem interdum suscipit. Vestibulum eget molestie leo. Aliquam erat volutpat. Ut sed nulla libero. Suspendisse id euismod quam. Aliquam interdum turpis vitae purus consectetur in pulvinar libero accumsan. In id augue dui, ac volutpat ante. Suspendisse purus est, ullamcorper id bibendum sed, placerat id leo.</p>
                    </text>);
         
            panelbar.Add().Text("Fifth Tab")
                    .Content(@<text>
                        <p>Fusce nec mauris enim, non pharetra neque. Etiam elementum nunc ut velit fermentum sed porta eros dignissim. Duis at nisl eros. Integer arcu nisl, accumsan non molestie at, elementum nec odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque arcu odio, aliquam vel viverra ac, varius at sapien. Nullam elementum nulla non libero interdum vestibulum at in lacus. Curabitur ac magna ac lacus dapibus convallis non at turpis.</p>
                    </text>);
        })
    )


    HomeController
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
     
    namespace BizSpark.Controllers
    {
        public class HomeController : Controller
        {
            //
            // GET: /Home/
     
            public ActionResult Index(string animation, bool? opacity)
            {
                ViewBag.animation = animation ?? "expand";
                ViewBag.opacity = opacity ?? true;
     
                return View();
            }
     
        }
    }
    _Layout.cshtml
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>@ViewBag.Title</title>
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
         @Styles.Render("~/Content/kendo/css")
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/kendo")
    </head>
    <body>
        @RenderBody()
     
        
        @RenderSection("scripts", required: false)
    </body>
    </html>
    BundleConfig.cs
        public class BundleConfig
        {
            // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
            public static void RegisterBundles(BundleCollection bundles)
            {
                bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                            "~/Scripts/jquery-{version}.js"));
     
                bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                            "~/Scripts/jquery-ui-{version}.js"));
     
                bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                            "~/Scripts/jquery.unobtrusive*",
                            "~/Scripts/jquery.validate*"));
     
                // Use the development version of Modernizr to develop with and learn from. Then, when you're
                // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
                bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                            "~/Scripts/modernizr-*"));
     
     
                bundles.Add(new ScriptBundle("~/bundles/kendo")
         .Include("~/Scripts/kendo.all.min.js") // or kendo.all.min.js  kendo.web.min.js
         .Include("~/Scripts/kendo.aspnetmvc.min.js")
    );
     
     
                bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
     
                bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                            "~/Content/themes/base/jquery.ui.core.css",
                            "~/Content/themes/base/jquery.ui.resizable.css",
                            "~/Content/themes/base/jquery.ui.selectable.css",
                            "~/Content/themes/base/jquery.ui.accordion.css",
                            "~/Content/themes/base/jquery.ui.autocomplete.css",
                            "~/Content/themes/base/jquery.ui.button.css",
                            "~/Content/themes/base/jquery.ui.dialog.css",
                            "~/Content/themes/base/jquery.ui.slider.css",
                            "~/Content/themes/base/jquery.ui.tabs.css",
                            "~/Content/themes/base/jquery.ui.datepicker.css",
                            "~/Content/themes/base/jquery.ui.progressbar.css",
                            "~/Content/themes/base/jquery.ui.theme.css"));
     
     
                // The Kendo CSS bundle - replace "2012.3.1315" with the Kendo UI version that you are using
                bundles.Add(new StyleBundle("~/Content/css")
                      .Include("~/Content/kendo.common.*")
                      .Include("~/Content/kendo.uniform.min.*")
                );
            }
        }
    }


    Any help is appreciated, thanks.
  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 26 Aug 2013 Link to this post

    Hi Mark,


    From the provided information it seems that  the Kendo UI scripts are either not loaded or are loaded too late. This behavior can be also observed when the jQuery scripts are included more than once in current page or and older version is used. 

    Could you please provide a runnable project where the issue is reproduced? This would help us pinpoint the exact reason for this behavior.

    I would also recommend checking the Kendo UI JavaScript dependencies article.

    Regards,
    Alexander Popov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Mark
    Mark avatar
    3 posts
    Member since:
    Aug 2013

    Posted 28 Aug 2013 Link to this post

    Hi Alexander,

    I've managed to get things running after reviewing the documentation you suggested.

    Many Thanks

    Mark
Back to Top