Hey,
I'm having a problem while tryign to use webpack + angularjs + kendo ui in my application.
While trying to use the kendo combo box, an exception raised (through chrome console):
"The Kendo UI directives require jQuery to be available before AngularJS. Please include jquery before angular in the document.".
I've read those issues (which didn't help me at all):
https://github.com/telerik/kendo-ui-core/issues/1932
http://stackoverflow.com/questions/39499716/how-to-use-kendo-ui-core-with-webpack-and-es2016
My code can be downloaded through Github:
https://github.com/amityaniv4/CheckSomething/tree/master
Thank you for helping :)
17 Answers, 1 is accepted
Unfortunately, inspecting and debugging client projects from GitHub, and integration with third-party tools and libraries falls outside of the scope of our support service.
If the recommended approach in the mentioned GitHub issue, or the article on using Kendo UI with Webpack from our documentation do not help, I can recommend successfully configuring the project to load jQuery before AngularJS first (with no Kendo UI involved whatsoever), as described in the following Stack Overflow discussion:
http://stackoverflow.com/questions/39080379/how-to-include-jquery-before-angular-in-webpack-with-es6
... and other online resources, and include Kendo UI in the project once this requirement has been met.
I can also recommend the Progress Professional Services that can help with setting up the project, feature customization, and more:
https://www.progress.com/services
Let me know, if you are interested, and I will arrange for someone from the team to contact you.
Regards,
Dimiter Topalov
Telerik by Progress
Rank 1
The jQuery version that our widgets are tested against (and compatible) are described in the following article (1.10.x, 2.2.x and 3.3.1)
https://docs.telerik.com/kendo-ui/intro/installation/prerequisites
Regards,
Nencho
Progress Telerik
Rank 1
I am also having the issues in angularjs while routing with button click
Rank 1
Here is the sequence order of loading scripts.
<script src="https://kendo.cdn.telerik.com/2018.3.911/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.911/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>
Rank 1
Here is sequence order of loading scripts
<script src="https://kendo.cdn.telerik.com/2018.3.911/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.911/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>
Here you will find a small sample, which directly references jQuery, Kendo and AngularJS scripts directly from our CDN service (as in the snippet that you have sent). May I ask you to modify this example, so it reproduces the problem observed and send it back to us? This way we will be able to troubleshoot the issue locally and to provide you with the most appropriate assistance on this case.
Regards,
Veselin Tsvetanov
Progress Telerik
Rank 1
Hi,
I am not able to produce the issue in your snippet. Here is the list of references I am using in my project. Here I am using angular routing concept.In the second page I have kendo grid, there it is showing error.
<script src="Scripts/jszip.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.911/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.911/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular-ui-router.js"></script>
<link href="Content/kendo/2018.3.1017/kendo.common.min.css" rel="stylesheet" />
<link href="Content/kendo/2018.3.1017/kendo.rtl.min.css" rel="stylesheet" />
<link href="Content/kendo/2018.3.1017/kendo.blueopal.min.css" rel="stylesheet" />
<link href="Content/font-awesome.css" rel="stylesheet" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/messenger.min.js"></script>
<script src="Scripts/messenger-theme-future.js"></script>
<link href="Content/messenger/messenger.css" rel="stylesheet" />
<link href="Content/messenger/messenger-theme-future.css" rel="stylesheet" />
<!--Angular User Modules and Directives-->
<script src="AngularScripts/Modules.js"></script>
<script src="AngularScripts/Controller.js"></script>
<script src="AngularScripts/Services.js"></script>
<script src="AngularScripts/LocalAdminDirective.js"></script>
<script src="AngularScripts/HomeDirective.js"></script>
Could you, please, prepare and send us a small isolated runnable sample reproducing the problem observed? Please, remove any external dependencies and database calls (if any) and use sample data, created in the code.
Regards,
Veselin Tsvetanov
Progress Telerik
Rank 1
Hi Veselin,
Here is the sample project.
Regards,
M. Mohan Krishna
Rank 1
As far as I can see, in the solutions sent you are not using Webpack at all. Note that I will need an isolated version of the sample in order to reproduce the issue locally and troubleshoot the case. The current project brings numerous dependencies and the views are hidden behind a log-in. In order to be able to assist you, I will need a very simple AngularJS application, which has only two views - the initial one and the one the Grid is placed on. Please, use local data created in the controller to populate the Grid and reference only AngularJS, Kendo and jQuery.
Regards,
Veselin Tsvetanov
Progress Telerik
Rank 1
Hi,
Can you elaborate what do u mean by Webpack?
Here is the sample project.
https://github.com/mohan64/SampleAPI.git.
Please check it now.
This forum thread discusses issues which arise when using Kendo UI in AngularJS application, which uses Webpack module loader. In the sample sent, however, Webpack is not used.
As per the issue faced, i noticed that it does not reference the Kendo styles:
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.common.min.css"><link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.default.min.css"><link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.mobile.all.min.css">That results in improper rendering of the Grid widget.
Also, I have noticed, that you are using the Excel export functionality of the widget. That would also require the JSZip library to be available in the view:
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"></script>Attached you will find a modified version of the sample introducing the above changes.
Regards,
Veselin Tsvetanov
Progress Telerik
Rank 1
Hi Veselin,
The error is still exists. Please check your modified version.
Regards,
Mohan Krishna.
You are right, after reviewing the case in sample in detail, I noticed that the The Kendo UI directives require jQuery to be available before AngularJS. Please include jquery before angular in the document. is present upon navigating from the LogIn view to Home (where the grid is placed). As far as I can see, the problem is related to the UI router itself, which does not load the scripts in their proper order.
I was able to entirely resolve the issue by using the 1.0.20 version of angular-ui-router from the following CDN. Attached is the modified version of the sample.
Regards,
Veselin Tsvetanov
Progress Telerik
Rank 1
Hi,
Yes, the problem is with angular routing. As default it is loading index.html file and again from routing I am loading index.html file, so it is not loading the scripts properly. I just removed the below line and its working fine.
$urlRouterProvider.otherwise("/Login");
Thank you,
Mohan Krishna,
Software Developer.