Hi,

Am getting 'Kendo is not defined' error while using date picker MVC UI control.

Uncaught ReferenceError: kendo is not defined

 

Hello Nallamani,

This issue indicates that the Kendo UI related scripts are not loaded correctly on the page. For example, if a culture file is loaded, it is using kendo, and the Kendo UI script file has to be loaded first.

Please check the following forum threads on a similar subject:

http://www.telerik.com/forums/uncaught-referenceerror-kendo-is-not-defined

http://stackoverflow.com/questions/31182638/uncaught-referenceerror-kendo-is-not-defined

Regards,
Stefan
Telerik by Progress

So, no sample project or .net core starter project to use right?  Why not?  More incomplete documentation for .NET core.  You can't even provide a sample to get a basic project running??

Included the following code in the head tag (moved from the body)  That fixed our issue:

    <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
        <script type="text/javascript" asp-append-version="true" src="~/lib/kendo-ui/kendo.custom.min.js"></script>
    </environment>
    <environment exclude="Development">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha256-E/V4cWE4qvAeO5MOhjtGtqDzPndRO1LBk8lJ/PR7CA4=">
        </script>

    </environment>

 

 

the CDN links never worked for us.  This is just the sample .net core project included with VS2017.  You have to modify it SUBSTANTIALLY to get Telerik for .net Core to actually work.

 

Hello, Chris,

Thank you for sharing with the Kendo UI Community.

The relevant article for the scripts and styles inclusion is available at:

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

For completeness, I will also include the article which demonstrates starting from scratch:

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

Finally, the easiest way is to use a template project with the VS Extensions:

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

I noticed that you mentioned that the CDN resources did not work for you. IF you are able to provide us with some more details, I would gladly investigate what may be the cause.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Same issue. It just doesn't work on Razor page 2.0. It only works on .Net Core MVC.

Hi Ryan,

The Kendo UI is a client-side library which is able to work with any environment. In the current case, the ASP.NET Core wrappers are designed for the ASP.NET Core framework. While the widgets depend on the NuGet, it is a matter of choice of how you would add the client-side scripts and styles to the project. 

In case there are duplicate references to either jQuery or Kendo UI, unexpected behavior could be observed. 

I am attaching a sample project to my response which is built with Razor pages rather than MVC. Is it possible for you to modify it in order to replicate the faulty behavior and send it back to me? 

Thank you for your cooperation in advance.


Kind regards,
Tsvetomir
Progress Telerik

Hi Tsvetomir,

Thanks for your sample. Will try this out and give you feedback!

Regards,

Ryan

Hi Tsvetomir,

Just wondering if you have razor page with api call sample? Probably just the onPostRead (fetch) will suffice. Sample rest api url: https://randomuser.me/api/?results=10.. Wanted to plot image and few fields like name and email on kendu grid.

Thanks in advance!

Ryan

Hi Ryan,

Binding to a WebAPI would not be coupled to the Kendo UI Grid at all. It is only responsible for retrieving the data. The service layer should be implemented to the developer's preferences and conventions. 

Nevertheless, a live demo for binding to a WebAPI could be found here:

https://demos.telerik.com/aspnet-core/grid/webapi

It would be similar for the razor pages. Only the syntax should be adjusted.


Best regards,
Tsvetomir
Progress Telerik

I had the same problem, and found the same solution, but you have to put all the pieces together first.  There is no 1 stop solution.

First, VS2019 16.2.4 .NET 4.7.03190, ASP.NET 2.2.0  I'm using Core, not MVC.

Create New Project -->ASP.NET Core Web Application-->TestTelerik01-->Create-->Web Application (not MVC) --> Create --> Done

Run the application, it is fine.

Following the instruction at https://docs.telerik.com/aspnet-core/getting-started/first-steps is all good.  The problem arises at Step 7 Client-Side resource.  They are not wrong, just not specific enough.  At step 7.3 it says "After jquery, copy and paste the script from the snippet."  Unfortunately, the jquery scripts are included in the Body and not the Head of the default app.  The solution is to move everything into the Head, including the kendo scripts, as Chris noted above.  NOTE: There is a link about including client side resources, (https://docs.telerik.com/aspnet-core/getting-started/installation/getting-started-copy-client-resources) and it clearly and emphatically shows everything goes into the Head  to make it work.  Step 7.3 is not emphatic about putting everything in the Head.

Once done, Date picker using HTML Helper comes right up.  Still got problems with tagHelper, but I'll work it out..  

Here is my Head section for anyone's amusement.  Hope this is helpful.

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - TestTelerik6</title>

    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.bootstrap-v4.min.css" />
        <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>
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/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"
              crossorigin="anonymous"
              integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
        </script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o">
        </script>
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.bootstrap-v4.min.css" />
        <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>
    </environment>
    <script src="~/js/site.js" asp-append-version="true"></script>
    <link rel="stylesheet" href="~/css/site.css" />
</head>

Hi Brian,

Thank you for sharing the solution that has worked out for you. The getting started article was recently updated and all the things that you refer to are actually stated. Especially the fact that the jQuery is added by the Project template and it should be added to the head of the layout. As well as, that the Kendo UI scripts and styles have to be added in the head after the jQuery reference. 

If you have any suggestions on how to improve that article, you can share them here or commit the changes directly. Clicking on the "Improve this article" button, you would be redirected to the GitHub repository which holds the article.

As per the TagHelpers issue, can you provide additional details on what exactly is the behavior you experience? As you have just recently created the project, can you send it to me so that I can examine it locally?

Thank you for your cooperation in advance.


Best regards,
Tsvetomir
Progress Telerik

Hi Tsvetomir,

I've attached TestTelerik6.zip The HTMLhelper works, displaying a datepicker.  But the tagHelper does not.  It is pure Asp.Net Core, no MVC.  I'm a noob, so I'm sure my mistake is trivial.  I appreciate your assistance.

In your response, you mention the Virtual Classroom as the fastest way to get up to speed with Telerik.  However, it is not available during the Trial License period.  Consequently, the evaluation process goes slowly, and at times frustrating because of the lack of foundational knowledge.  These huge knowledge gaps make the evaluation process a very frustrating experience, and don't make it tough to justify the purchase of the DevCraft products.

I would suggest some kind of 3-5 hours of "kickstart" course to lay down a solid foundation.  For example, Microsoft's Contoso University example project, all done with Telerik components?  Call it Sofia University. :-)  This would provide small, but comprehensive example for evaluators to refer back to to.  It would also highlight the advantage of Telerik products over generic Asp.Net.

Thanks again.

 

Hi Brian,

First of all, I would like to thank you for taking the time to share your thoughts and feedback on the getting started experience. 

Major effort has been put in improving the documentation of the ASP.NET Core in order to make the getting started process an easier journey. There are short videos in the bottom of the getting started articles. Our next steps in the continuous effort is to focus on the documentation for the TagHelpers. As well as, creating videos which would cover diverse scenarios with the Kendo UI widgets. 

As per the issue on hand, I did not find the attached zip file to your response. Can you confirm that you have sent it? 

In the meanwhile, I would recommend taking a look at the live demo below. Can you check out the console in the DevTools for any exceptions that might have been thrown?

https://demos.telerik.com/aspnet-core/datepicker/tag-helper

Looking forward to your reply.


Best regards,
Tsvetomir
Progress Telerik