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

Jquery Conflict with Kendo Script

1 Answer 487 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Palanisamy
Top achievements
Rank 1
Palanisamy asked on 23 Sep 2015, 11:48 AM

This issue highly critical and important. Please provide the solution immediately. Jquery conflict with kendo script.

 My mvc layout.cshtml code

-------------------------------------------

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @*@Scripts.Render("~/bundles/jquery")*@    
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>
Kendo view code

-------------------------------

@{
    ViewBag.Title = "KendoTabstrip";
}

<html>
<head>
    <title></title>
    <link href="~/Content/Kendo/kendo.common.min.css" rel="stylesheet" />
    <link href="~/Content/Kendo/kendo.default.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/KendoUI/kendo.all.min.js"></script>
</head>
<body>
    <div id="example">
        <div class="demo-section k-header">
            <div id="tabstrip">
                <ul>
                    <li class="k-state-active">
                        Paris
                    </li>
                    <li>
                        New York
                    </li>
                    <li>
                        London
                    </li>
                    <li>
                        Moscow
                    </li>
                </ul>
                <div>
                    <span class="rainy">&nbsp;</span>
                    <div class="weather">
                        <h2>17<span>&ordm;C</span></h2>
                        <p>Rainy weather in Paris.</p>
                    </div>
                </div>
                <div>
                    <span class="sunny">&nbsp;</span>
                    <div class="weather">
                        <h2>29<span>&ordm;C</span></h2>
                        <p>Sunny weather in New York.</p>
                    </div>
                </div>
                <div>
                    <span class="sunny">&nbsp;</span>
                    <div class="weather">
                        <h2>21<span>&ordm;C</span></h2>
                        <p>Sunny weather in London.</p>
                    </div>
                </div>
                <div>
                    <span class="cloudy">&nbsp;</span>
                    <div class="weather">
                        <h2>16<span>&ordm;C</span></h2>
                        <p>Cloudy weather in Moscow.</p>
                    </div>
                </div>
            </div>
        </div>
        <style>
            .sunny, .cloudy, .rainy {
                display: block;
                margin: 30px auto 10px;
                width: 128px;
                height: 128px;
                background: url('../content/web/tabstrip/weather.png') transparent no-repeat 0 0;
            }

            .cloudy {
                background-position: -128px 0;
            }

            .rainy {
                background-position: -256px 0;
            }

            .weather {
                margin: 0 auto 30px;
                text-align: center;
            }

            #tabstrip h2 {
                font-weight: lighter;
                font-size: 5em;
                line-height: 1;
                padding: 0 0 0 30px;
                margin: 0;
            }

                #tabstrip h2 span {
                    background: none;
                    padding-left: 5px;
                    font-size: .3em;
                    vertical-align: top;
                }

            #tabstrip p {
                margin: 0;
                padding: 0;
            }
        </style>
        <script>
            $(document).ready(function () {
                $("#tabstrip").kendoTabStrip({
                    animation: {
                        open: {
                            effects: "fadeIn"
                        }
                    }
                });
            });
        </script>
</div>

</body>

</html>

 

 

Finally am getting this error "Uncaught TypeError: $(...).kendoTabStrip is not a function". Kindly provide the solution immediately. This is highly important and critical. Since whenver use with asp.net mvc we are getting this error. Please help me out.

‚Äč

1 Answer, 1 is accepted

Sort by
0
Plamen Lazarov
Telerik team
answered on 25 Sep 2015, 11:56 AM

Hello Palanisamy,

The observed error can occur due to the following reasons:

- the Kendo UI scripts are missing or cannot be loaded
- jQuery is included after the Kendo UI scripts

Please refer to the Troubleshooting documentation articles below for more information.

http://docs.telerik.com/kendo-ui/troubleshooting#javascript-error-that-kendo-widgets-are-unavailable-or-undefined

http://docs.telerik.com/kendo-ui/aspnet-mvc/troubleshooting#troubleshooting

Let me know if the above information helps. 

Regards,
Plamen Lazarov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
General Discussions
Asked by
Palanisamy
Top achievements
Rank 1
Answers by
Plamen Lazarov
Telerik team
Share this question
or