Loading Kendo UI using jQuery

[Michael]

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

[Veselin Tsvetanov]

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:

$.getScript('https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js', function() {
    $("#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