Kendo Not Defined Error -Razor Pages Core 2.0

1 Answer 1398 Views

General Discussions

John asked on 06 Dec 2017, 05:23 AM

_layout-cshtml.png

index-cshtml.png

index-html.png

Hi, I have an index page that I'm trying to implement a simple kendo grid

I have followed the instructions closely here:

https://docs.telerik.com/aspnet-core/getting-started/getting-started

However I keep getting a problem of 'uncaught referenceerror kendo is not defined' on the client-side js

I have attached the relevant files.

Thanks in advance

1 Answer, 1 is accepted

answered on 08 Dec 2017, 02:40 PM

Hi John,

This exception and the possible reason for it (registering the Kendo UI scripts outside the _Layout head tag) has been discussed in the following stackoverflow thread. As mentioned in the documentation (7.) for the scripts to be properly registered they need to be loaded in the head tag after jquery. Here's an exemplary _Layout head tag with the script and css files loaded from our CDN:

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>@ViewData["Title"] - TelerikAspNetCoreApp2</title>

<link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />

<link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />

<link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.flat.min.css" rel="stylesheet" type="text/css" />

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jszip.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.aspnetmvc.min.js"></script>

<environment names="Development">

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />

<link rel="stylesheet" href="~/css/site.css" />

</environment>

<environment names="Staging,Production">

<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"

asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"

asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />

<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />

</environment>

</head>

I hope this information is helpful and would allow you to deal with the exception. Let us know in case you are still getting it after moving the scripts within the head tag.

Regards,
Ivan Danchev
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

John

commented on 11 Dec 2017, 06:48 AM

_layout-cshtml.png

index-cshtml.png

_viewimports-cshtml.png

startup-cs.png

Thanks Ivan,

I have adjusted my file (attached)
_Layout.cshtml
_ViewImports.cshtml
Startup.cs

However I still cannot even see a simple date-picker in the index page:

Hope this is a simple fix…

The js error is:

(index):56 Uncaught TypeError: jQuery(...).kendoDatePicker is not a function
    at HTMLDocument.<anonymous> ((index):56)
    at i (jquery-2.2.2.min.js:formatted:1308)
    at Object.fireWith [as resolveWith] (jquery-2.2.2.min.js:formatted:1362)
    at Function.ready (jquery-2.2.2.min.js:formatted:1456)
    at HTMLDocument.J (jquery-2.2.2.min.js:formatted:1464)
(anonymous) @ (index):56
i @ jquery-2.2.2.min.js:formatted:1308
fireWith @ jquery-2.2.2.min.js:formatted:1362
ready @ jquery-2.2.2.min.js:formatted:1456
J @ jquery-2.2.2.min.js:formatted:1464

John

commented on 12 Dec 2017, 02:53 AM

I fixed it by adding the cdn to my body element in the _Layout.cshtml:

Ivan Danchev

commented on 14 Dec 2017, 06:53 AM

Hello John,

I am glad the issue is fixed. At my end registering the script files in the body was not needed, it was enough adding them to the head tag.

Regards,
Ivan Danchev
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

Monde

commented on 21 Mar 2018, 05:52 AM

Thank you Ivan, it worked

Steve

commented on 25 Sep 2018, 05:21 PM

I also had to add the cdn to the body in _layout.cshtml.

I am using ASP.NET Core 2.1. Telerik 2018.3.911.

I was getting the error Kendo(something) is not a function.

Lisha

commented on 18 Mar 2019, 05:39 PM

Hi Ivan,

I did add the links and scripts in the head tag in layout page, but i still get the error. I have attached my layout, web.config, index and controller. Can you please help me to get this fixed.

Lisha

commented on 18 Mar 2019, 05:40 PM

layout.html<!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>
<link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

<style>
.navbar-inverse {
background-color: rgb(92, 153, 214);
}

.navbar {
min-height: 70px;
}

.navbar-inverse .navbar-nav > li > a {
color: black;
}

.navbar-inverse .navbar-nav > li > a:hover {
color: black;
}

.jumbotron {
padding-top: 110px;
padding-bottom: 48px;
color: white;
}

.navbar-nav > li > a {
padding-bottom: 0px
}

.navbar-brand5 {
float: left;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
color: black;
}

.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
background-color: black
}

body {
font-size: 11px;
}

.navbar-header {
height: 45px;
}
</style>
<link href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common-bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.aspnetmvc.min.js"></script>
</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>
<a class="navbar-brand" rel="home" href="#" title="RFPContracts">
<img src="~/images/nyc_dept_edu.png" height="45" width="100" />
</a>
<a class="navbar-brand" rel="home" href="#" title="RFPContracts">
<img src="~/images/3K_Logo.png" height="45" width="100" />
</a>
<a class="navbar-brand" rel="home" href="#" title="RFPContracts">
<img src="~/images/pk4a_logoslide.jpg" height="45" width="100" />
</a>
@Html.ActionLink("HOME", "Index", "Home", new { area = "" }, new { @class = "navbar-brand5" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Budget Negotiation", "Index", "BudgetNegotiation", new { area = "BudgetNegotiation" }, new { @class = "navbar-brand5" })</li>
</ul>

</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>

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

------------------------------------------------------index.html----------------------------

@model RFPContracts.Areas.BudgetNegotiation.Models.BudgetNegotiationModel

@{
ViewBag.Title = "Index";
}

<div>

<div id="resultGrid">

@(Html.Kendo().Grid<RFPContracts.Areas.BudgetNegotiation.Models.BudgetNegotiationModel>()
.Name("BudgetNegotiationGrid")
.AutoBind(true)
.Columns(co =>
{
co.Bound(i => i.ProposalID).Title("Proposal").Width(5);
co.Bound(i => i.SiteID).Title("SiteID").Width(5);
co.Bound(i => i.SiteName).Title("SiteName").Width(75);

})
.DataSource(dataSource => dataSource
.Ajax()
.Batch(false)

.Read(read => read.Action("Budget_Negotiation_Read", "BudgetNegotiation"))
.PageSize(30)

)

.Sortable()
.Mobile()
.Resizable(resize => resize.Columns(true))
.Selectable()
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.StartsWith("Starts with")
))
)
.Pageable(p => p.Refresh(true))

.Events(events => events.DataBound("dataBound")
.Edit("edit"))

)

</div>
</div>

<script>
function dataBound() {

var grid = $("#BudgetNegotiationGrid").data("kendoGrid");
var gridData = grid.dataSource.view();

}
</script>

Ivan Danchev

commented on 21 Mar 2019, 12:42 PM

Hello Lisha,

Could you post the text of the exception you are getting?

Regards,
Ivan Danchev
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

Lisha

commented on 21 Mar 2019, 02:49 PM

Uncaught ReferenceError: kendo is not defined. The kendo.aspnetmvc.min.js script is not included.

Ivan Danchev

commented on 26 Mar 2019, 02:05 PM

TelerikAspNetCoreApp16.zip

Hi,

The kendo.aspnetmvc.min.js file is required and it is properly loaded in the Layout you posted. Attached you can find a sample runnable project with a Grid in the Index view. The client-side resources, including the kendo.aspnetmvc.min.js file, are loaded in the Layout's head tag through our CDN, similarly to the way they are loaded in your code snippet. At my end there are no exceptions.

We would suggest going through the steps listed in our Getting Started article, which demonstrates how to use UI for ASP.NET Core in a Core web application.

Regards,
Ivan Danchev
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

Lisha

commented on 27 Mar 2019, 01:32 PM

i am not able to run this .. i get the below error

SeverityCodeDescriptionProjectFileLineSuppression State
ErrorNETSDK1045The current .NET SDK does not support targeting .NET Core 2.2. Either target .NET Core 2.1 or lower, or use a version of the .NET SDK that supports .NET Core 2.2.TelerikAspNetCoreApp16C:\Program Files\dotnet\sdk\2.1.504\Sdks\Microsoft.NET.Sdk\targets\Microsoft.NET.TargetFrameworkInference.targets137

Lisha

commented on 27 Mar 2019, 02:08 PM

I am using asp.net MVC with entity framework 6

Lisha

commented on 28 Mar 2019, 04:19 PM

Please find the runnable code in the below drive. Let me know what could be done to fix this issue.

https://drive.google.com/drive/folders/1PfuJtxtH8uqQ9atFdfhfFdnPKBmXX2DU?usp=sharing

Ivan Danchev

commented on 29 Mar 2019, 01:11 PM

Hi Lisha,

I checked the linked project. The exception is thrown, because the BudgetNegotiation Index page is in the Areas folder. It uses its own _Layout file (located in Areas/BudgetNegotiation/Views/Shared). No Kendo UI client resources references have been added to this _Layout file, therefore using Kendo UI on the Index view causes the "kendo is not defined" exception. After adding the client resources to the _Layout file and removing the jquery bundle, because jQuery is already included in the references added to the head tag the exception is gone. See this screenshot, which shows the necessary modifications.

Regards,
Ivan Danchev
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

Ryan

commented on 21 Aug 2019, 08:28 PM

kendo.syncReady(function(){jQuery("#my-picker").kendoDatePicker({"format":"M/d/yyyy"});});

Unhandled exception at line 115, column 91 in https://localhost:44362/Account/Login
0x800a1391 - JavaScript runtime error: 'kendo' is undefined occurred

What did I miss? Why I'm getting this error?

Below are snippet of my code.

Thanks in advance!

Startup.cs

public void ConfigureServices(IServiceCollection services)

{

...

services.AddKendo();

...

}

_ViewImports.cshtml

@using Microsoft.AspNetCore.Identity

@using SSO

@using SSO.Data

@namespace SSO.Pages

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@addTagHelper *, Kendo.Mvc

_Layout.cshtml

...

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>@ViewData["Title"] - SSO</title>

<environment include="Development">

<link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.min.css" />

<link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome-badge.css" />

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />

<link rel="stylesheet" href="~/css/site.css" />

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.bootstrap-v4.min.css" />

</environment>

<environment exclude="Development">

<link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.min.css" />

<link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome-badge.css" />

<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"

asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"

asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />

<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.bootstrap-v4.min.css" />

</environment>

</head>

...

<div>

<div class="container">

@RenderBody()

<hr />

</div>

<environment include="Development">

<script src="~/lib/jquery/dist/jquery.js"></script>

<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>

<script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.aspnetmvc.min.js"></script>

<script src="~/js/site.js" asp-append-version="true"></script>

</environment>

<environment exclude="Development">

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"

asp-fallback-src="~/lib/jquery/dist/jquery.min.js"

asp-fallback-test="window.jQuery"

crossorigin="anonymous"

integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">

</script>

<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"

asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"

asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"

crossorigin="anonymous"

integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">

</script>

<script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.aspnetmvc.min.js"></script>

<script src="~/js/site.min.js" asp-append-version="true"></script>

</environment>

...

Index.cshtml

@page

@model IndexModel

@inject IAuthorizationService AuthorizationService

@using Microsoft.AspNetCore.Authorization

@inject IProductsToken ProductsToken

@using SingleSignOn.Services

@using Microsoft.AspNetCore.Http

@inject SignInManager<ApplicationUser> SignInManager

@inject UserManager<ApplicationUser> UserManager

@using Microsoft.AspNetCore.Identity

@using SSO.Data;

@using Kendo.Mvc.UI

@{

ViewData["Title"] = "Services";

}

...

<div class="text-center">

<h2>Kendo UI DatePicker</h2>

@(Html.Kendo().DatePicker()

.Name("my-picker")

)

</div>

...

Ivan Danchev

commented on 26 Aug 2019, 10:39 AM

Ryan,

Move this part:

<environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.aspnetmvc.min.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>
    <environment exclude="Development">
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
        </script>
        <script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.aspnetmvc.min.js"></script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
    </environment>

within the <head> tag.

If this doesn't fix the exception, post all of the _Layout's content or attach the file.

Regards,
Ivan Danchev
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

Ryan

commented on 04 Sep 2019, 04:30 PM

Thanks Ivan Danchev!

sateesh

commented on 29 Mar 2020, 10:02 AM

Hi,

I am getting this exception

Uncaught TypeError: jQuery(...).kendoDatePicker is not a function
at HTMLDocument.<anonymous> (Main:91)
at mightThrow (jquery.js:3534)
at process

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - TimeDoctor</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-blue-grey.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<link href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.bootstrap-v4.min.css" rel="stylesheet" type="text/css" />

<script src="https://kendo.cdn.telerik.com/2020.1.219/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.219/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.219/js/kendo.aspnetmvc.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

</head>
<body>


<div class="w3-top">
<div class="w3-bar w3-theme-d2 w3-left-align w3-large">
<a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-hover-white w3-large w3-theme-d2" href="javascript:void(0);" onclick="openNav()"><i class="fa fa-bars"></i></a>

<a class="w3-bar-item w3-button w3-padding-large w3-theme-d4">
<img src="~/images/timedoctor.png" class="w3-circle" style="height:23px;width:23px" alt="Avatar">
</a>

<div class="w3-dropdown-hover w3-hide-small">
<a asp-page="/DashBoard/Main" class="w3-button w3-padding-large">DASHBOARD</a>
<div class="w3-dropdown-content w3-card-4 w3-bar-block">
<a class="w3-bar-item w3-button">Team</a>
<a class="w3-bar-item w3-button">Users</a>
</div>
</div>

<div class="w3-dropdown-hover w3-hide-small">
<a class="w3-button w3-padding-large">REPORTS</a>
<div class="w3-dropdown-content w3-card-4 w3-bar-block">
<a class="w3-bar-item w3-button">Active Summery</a>
<a class="w3-bar-item w3-button">Hours Tracked</a>
<a class="w3-bar-item w3-button">Productivity Report</a>
<a class="w3-bar-item w3-button">Timeline</a>
<a class="w3-bar-item w3-button">Timeline-Detailed</a>
<a class="w3-bar-item w3-button">Web & App Usage</a>
</div>
</div>

<a class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">REPORTS</a>
<a class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">ENDTIME</a>

<div class="w3-dropdown-hover w3-hide-small">
<a class="w3-button w3-padding-large">SETTINGS</a>
<div class="w3-dropdown-content w3-card-4 w3-bar-block">
<a class="w3-bar-item w3-button">Billing</a>
<a class="w3-bar-item w3-button">Productivity Rating</a>
<a class="w3-bar-item w3-button">Manage Users</a>
<a class="w3-bar-item w3-button">Manage User Groups</a>
<a class="w3-bar-item w3-button">Integrations</a>
<a class="w3-bar-item w3-button">Comapny Seettings</a>
</div>
</div>

<a class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">PAYROLL</a>
<a class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">INVITE</a>
<a class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">DOWNLOAD</a>

<a asp-page="/UserProfile/UserLogin" class="w3-bar-item w3-button w3-hide-small w3-right w3-padding-large w3-hover-white" >
<i class="fa fa-users fa-fw w3-margin-right"></i>Login
</a>
</div>
</div>

<div class="container">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>

<footer class="border-top footer text-muted">
<div class="container">
© 2020 - TimeDoctor - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>

@RenderSection("Scripts", required: false)
</body>

</html>

<style>
a{
font-size:12px !important;
text-decoration:none !important;
}

.w3-dropdown-content{
width:100px !important;
}
</style>

Ivan Danchev

commented on 01 Apr 2020, 03:27 PM

Hi,

The problem is caused by loading jQuery 3 times. jQuery should be loaded only once in the <head> tag (as mentioned in the documentation). So, to fix the issue, remove the extra jQuery scripts:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - TimeDoctor</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />


    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-blue-grey.css">
    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <link href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.bootstrap-v4.min.css" rel="stylesheet" type="text/css" />
  

    <script src="https://kendo.cdn.telerik.com/2020.1.219/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.219/js/kendo.all.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.219/js/kendo.aspnetmvc.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

</head>
<body>
    <!-- Navbar -->

    <div class="w3-top">
        <div class="w3-bar w3-theme-d2 w3-left-align w3-large">
            <a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-hover-white w3-large w3-theme-d2" href="javascript:void(0);" onclick="openNav()"><i class="fa fa-bars"></i></a>

            <a class="w3-bar-item w3-button w3-padding-large w3-theme-d4">
                <img src="~/images/timedoctor.png" class="w3-circle" style="height:23px;width:23px" alt="Avatar">
            </a>

            <div class="w3-dropdown-hover w3-hide-small">
                    <a asp-page="/DashBoard/Main" class="w3-button w3-padding-large">DASHBOARD</a>
                <div class="w3-dropdown-content w3-card-4 w3-bar-block">
                    <a  class="w3-bar-item w3-button">Team</a>
                    <a  class="w3-bar-item w3-button">Users</a>
                </div>
            </div>

            <div class="w3-dropdown-hover w3-hide-small">
                <a class="w3-button w3-padding-large">REPORTS</a>
                <div class="w3-dropdown-content w3-card-4 w3-bar-block">
                    <a  class="w3-bar-item w3-button">Active Summery</a>
                    <a  class="w3-bar-item w3-button">Hours Tracked</a>
                    <a  class="w3-bar-item w3-button">Productivity Report</a>
                    <a  class="w3-bar-item w3-button">Timeline</a>
                    <a  class="w3-bar-item w3-button">Timeline-Detailed</a>
                    <a  class="w3-bar-item w3-button">Web &amp; App Usage</a>
                </div>
            </div>

            <a  class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">REPORTS</a>
            <a  class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">ENDTIME</a>

            <div class="w3-dropdown-hover w3-hide-small">
                <a class="w3-button w3-padding-large">SETTINGS</a>
                <div class="w3-dropdown-content w3-card-4 w3-bar-block">
                    <a  class="w3-bar-item w3-button">Billing</a>
                    <a  class="w3-bar-item w3-button">Productivity Rating</a>
                    <a  class="w3-bar-item w3-button">Manage Users</a>
                    <a  class="w3-bar-item w3-button">Manage User Groups</a>
                    <a  class="w3-bar-item w3-button">Integrations</a>
                    <a  class="w3-bar-item w3-button">Comapny Seettings</a>
                </div>
            </div>

            <a  class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">PAYROLL</a>
            <a  class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">INVITE</a>
            <a  class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">DOWNLOAD</a>

            <a asp-page="/UserProfile/UserLogin" class="w3-bar-item w3-button w3-hide-small w3-right w3-padding-large w3-hover-white" >
                <i class="fa fa-users fa-fw w3-margin-right"></i>Login
            </a>
        </div>
    </div>

    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2020 - TimeDoctor - <a asp-area="" asp-page="/Privacy">Privacy</a>
        </div>
    </footer>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @RenderSection("Scripts", required: false)
    </body>

</html>

<style>
    a{
        font-size:12px !important;
        text-decoration:none !important;
    }

    .w3-dropdown-content{
        width:100px !important;
    }
</style>

Regards,
Ivan Danchev
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.