'Kendo is not defined' issue

14 posts, 0 answers
  1. Nallamani
    Nallamani avatar
    1 posts
    Member since:
    Feb 2014

    Posted 05 Apr 2017 Link to this post

    Hi,

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

    Uncaught ReferenceError: kendo is not defined

     

  2. Stefan
    Admin
    Stefan avatar
    2491 posts

    Posted 06 Apr 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Chris
    Chris avatar
    42 posts
    Member since:
    Sep 2018

    Posted 25 Feb Link to this post

    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??
  4. Chris
    Chris avatar
    42 posts
    Member since:
    Sep 2018

    Posted 25 Feb Link to this post

    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.

     

  5. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    773 posts

    Posted 27 Feb Link to this post

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

    Posted 25 Aug Link to this post

    Same issue. It just doesn't work on Razor page 2.0. It only works on .Net Core MVC.
  7. Tsvetomir
    Admin
    Tsvetomir avatar
    366 posts

    Posted 27 Aug Link to this post

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

    Posted 02 Sep in reply to Tsvetomir Link to this post

    Hi Tsvetomir,

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

    Regards,

    Ryan

  9. Ryan
    Ryan avatar
    15 posts
    Member since:
    Aug 2012

    Posted 03 Sep Link to this post

    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

  10. Tsvetomir
    Admin
    Tsvetomir avatar
    366 posts

    Posted 05 Sep Link to this post

    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
    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. Brian
    Brian avatar
    2 posts
    Member since:
    Sep 2019

    Posted 11 Sep Link to this post

    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>

  12. Tsvetomir
    Admin
    Tsvetomir avatar
    366 posts

    Posted 13 Sep Link to this post

    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
    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. Brian
    Brian avatar
    2 posts
    Member since:
    Sep 2019

    Posted 13 Sep in reply to Tsvetomir Link to this post

    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.

     

  14. Tsvetomir
    Admin
    Tsvetomir avatar
    366 posts

    Posted 17 Sep Link to this post

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