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
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
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
I fixed it by adding the cdn to my body element in the _Layout.cshtml:
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.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>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
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
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.
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.
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>
Could you post the text of the exception you are getting?
Regards,
Ivan Danchev
Progress Telerik
Uncaught ReferenceError: kendo is not defined. The kendo.aspnetmvc.min.js script is not included.
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
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
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
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
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
>
</
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"
>
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
>
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
>
...
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
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>
<!-- 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 & 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>
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 & 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>
Regards,
Ivan Danchev
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.