This is a migrated thread and some comments may be shown as answers.

Loading Kendo UI using jQuery

1 Answer 111 Views
Application
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 07 Feb 2017, 05:04 PM

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

1 Answer, 1 is accepted

Sort by
0
Veselin Tsvetanov
Telerik team
answered on 09 Feb 2017, 12:41 PM
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.
Tags
Application
Asked by
Michael
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Share this question
or