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

Webpack + AngularJs + Kendo UI problem

17 Answers 255 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Amit
Top achievements
Rank 1
Amit asked on 15 Jan 2017, 06:30 AM

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

Sort by
0
Dimiter Topalov
Telerik team
answered on 18 Jan 2017, 08:18 AM
Hi Amit,

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
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.
0
yogesh kumar
Top achievements
Rank 1
answered on 15 Nov 2018, 02:56 PM
I am facing the same issue. Just want to confirm does it have anything to do jquery version. I am embedding kendo spread sheet in my existing project. Jquery and angular js are already included and running in existing project.
0
Nencho
Telerik team
answered on 19 Nov 2018, 11:50 AM
Hello Amit,

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
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.
0
Mohan Krishna
Top achievements
Rank 1
answered on 03 Dec 2018, 06:31 AM

I am also having the issues in angularjs while routing with button click

 

0
Mohan Krishna
Top achievements
Rank 1
answered on 03 Dec 2018, 06:33 AM

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>

0
Mohan Krishna
Top achievements
Rank 1
answered on 03 Dec 2018, 06:33 AM

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>

0
Veselin Tsvetanov
Telerik team
answered on 04 Dec 2018, 03:49 PM
Hi Mohan Krishna,

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
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.
0
Mohan Krishna
Top achievements
Rank 1
answered on 05 Dec 2018, 03:46 PM

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>

0
Veselin Tsvetanov
Telerik team
answered on 07 Dec 2018, 11:44 AM
Hi Mohan Krishna,

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
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.
0
Mohan Krishna
Top achievements
Rank 1
answered on 10 Dec 2018, 07:25 AM

Hi Veselin,

Here is the sample project.

 

Regards,

M. Mohan Krishna

0
Mohan Krishna
Top achievements
Rank 1
answered on 10 Dec 2018, 07:37 AM
https://github.com/mohan64/SampleAPI.git
0
Veselin Tsvetanov
Telerik team
answered on 11 Dec 2018, 12:47 PM
Hello Mohan Krishna,

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
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.
0
Mohan Krishna
Top achievements
Rank 1
answered on 13 Dec 2018, 03:29 PM

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.

0
Veselin Tsvetanov
Telerik team
answered on 14 Dec 2018, 10:52 AM
Hi Mohan Krishna,

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:

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:

Attached you will find a modified version of the sample introducing the above changes.

Regards,
Veselin Tsvetanov
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.
0
Mohan Krishna
Top achievements
Rank 1
answered on 15 Dec 2018, 09:42 AM

Hi Veselin,

 

The error is still exists. Please check your modified version.

 

Regards,

Mohan Krishna.

0
Veselin Tsvetanov
Telerik team
answered on 17 Dec 2018, 03:40 PM
Hello 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
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.
0
Mohan Krishna
Top achievements
Rank 1
answered on 25 Dec 2018, 06:15 AM

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.

 

Tags
ComboBox
Asked by
Amit
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
yogesh kumar
Top achievements
Rank 1
Nencho
Telerik team
Mohan Krishna
Top achievements
Rank 1
Veselin Tsvetanov
Telerik team
Share this question
or