Loading Kendo UI using jQuery

2 posts, 0 answers
  1. Michael
    Michael avatar
    1 posts
    Member since:
    Apr 2015

    Posted 07 Feb Link to this post

    Here's the situation I am currently facing.  I am working with a cloud web application that allows me to provide a javascript file that, using jQuery, allows me to do customize the UI.  However, the application does not allow me to directly add any javascript / css to the head of each page.  What I am trying to do is use jQuery to add the Kendo UI library and css, so that I can then use Kendo to do some custom UI in the web application.

    So in my javascript file, I have the following lines at the very top, so that Kendo is loaded as soon as possible:

    $('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', 'https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css'));
    $('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', 'https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css'));
    $.getScript('https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js');

    If I look at the sources for the page, after the script runs, the Kendo UI components do appear.  However, when I then try to use a component, for instance the Kendo Menu (by calling $('#menu').kendoMenu();), I get "Uncaught TypeError: $(..).kendoMenu is not a function".  Any ideas on what I'm missing, or how I can fix this problem?

    Thanks,

    Mike

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    490 posts

    Posted 09 Feb Link to this post

    Hello Mike,

    You will need to place the initialization logic in the callback function of the $.getScript() ​method to guarantee, that the Kendo script is already available on the page:
        $("#menu").kendoMenu();
    });

    Here you will find a simple implementation of the above.

    I hope, that this helps. In case you have any further questions, please do not hesitate to contact us.

    Regards,
    Veselin Tsvetanov
    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.
Back to Top