Kendo Not Defined Error -Razor Pages Core 2.0

21 posts, 1 answers
  1. John
    John avatar
    12 posts
    Member since:
    May 2016

    Posted 05 Dec 2017 Link to this post

    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

     

     

     

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2189 posts

    Posted 08 Dec 2017 Link to this post

    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>
     
        <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.
  3. John
    John avatar
    12 posts
    Member since:
    May 2016

    Posted 11 Dec 2017 in reply to Ivan Danchev Link to this post

    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
  4. John
    John avatar
    12 posts
    Member since:
    May 2016

    Posted 11 Dec 2017 in reply to John Link to this post

     

    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>

     

       

  5. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    2189 posts

    Posted 14 Dec 2017 Link to this post

    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.
  6. Monde
    Monde avatar
    1 posts
    Member since:
    Jul 2015

    Posted 21 Mar 2018 in reply to Ivan Danchev Link to this post

    Thank you Ivan, it worked
  7. Steve
    Steve avatar
    5 posts
    Member since:
    Oct 2012

    Posted 25 Sep 2018 Link to this post

    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.  

  8. Lisha
    Lisha avatar
    7 posts
    Member since:
    Feb 2019

    Posted 18 Mar 2019 in reply to Ivan Danchev Link to this post

    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. 

     

  9. Lisha
    Lisha avatar
    7 posts
    Member since:
    Feb 2019

    Posted 18 Mar 2019 in reply to Lisha Link to this post

    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>&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>

     

    ------------------------------------------------------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>

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

  10. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2189 posts

    Posted 21 Mar 2019 Link to this post

    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.
  11. Lisha
    Lisha avatar
    7 posts
    Member since:
    Feb 2019

    Posted 21 Mar 2019 Link to this post

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

  12. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2189 posts

    Posted 26 Mar 2019 Link to this post

    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.
  13. Lisha
    Lisha avatar
    7 posts
    Member since:
    Feb 2019

    Posted 27 Mar 2019 in reply to Ivan Danchev Link to this post

    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

  14. Lisha
    Lisha avatar
    7 posts
    Member since:
    Feb 2019

    Posted 27 Mar 2019 Link to this post

    I am using asp.net MVC with entity framework 6
  15. Lisha
    Lisha avatar
    7 posts
    Member since:
    Feb 2019

    Posted 28 Mar 2019 Link to this post

    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

  16. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2189 posts

    Posted 29 Mar 2019 Link to this post

    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.
  17. Ryan
    Ryan avatar
    91 posts
    Member since:
    Aug 2012

    Posted 21 Aug 2019 Link to this post

    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" />
        </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" />
        </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="~/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="~/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>
    ...

     

     

     

  18. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2189 posts

    Posted 26 Aug 2019 Link to this post

    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.
  19. Ryan
    Ryan avatar
    91 posts
    Member since:
    Aug 2012

    Posted 04 Sep 2019 in reply to Ivan Danchev Link to this post

    Thanks Ivan Danchev! 
  20. sateesh
    sateesh avatar
    1 posts
    Member since:
    Mar 2020

    Posted 29 Mar 2020 Link to this post

    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 &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>

     

  21. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2189 posts

    Posted 01 Apr 2020 Link to this post

    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.
Back to Top