Hi,
I'm loading dynamically a view from MVC inside my angular application, all the kendo controls renders ok but if the view contains a window the window content apears 2 times , one inside the window and other at the end of the body (Image attached).
The same problem happens with a grid with editor popup (image 2 atached)
I followed the net core mvc getting started tutorial but for include all the js files I added this lines inside angular.json
"scripts": [ { "input": "../Scripts/AppScripts/jquery.js", "inject": false, "bundleName": "jquery" }, { "input": "../Scripts/AppScripts/kendo.all.min.js", "inject": false, "bundleName": "kendo.all.min" }, { "input": "../Scripts/AppScripts/kendo.aspnetmvc.min.js", "inject": false, "bundleName": "kendo.aspnetmvc.min" }, { "input": "../Scripts/AppScripts/kendo.culture.de-DE.min.js", "inject": false, "bundleName": "kendo.culture.de-DE.min" }]
and in my index file inside head tag:
<script src="jquery.js"></script><script src="kendo.all.min.js"></script><script src="kendo.aspnetmvc.min.js"></script><script src="kendo.culture.de-DE.min.js"></script>
I created a sample project to reproduce the problem:
https://drive.google.com/file/d/1rydILf7WvVDiLUGZGRBfl4wjZihw2kbw/view?usp=sharing
inside home component.ts comment or un comment the lines :
this.loadUrl('/home/windowDemo');// this.loadUrl('/home/index');to see the problem in a view with a single window or in a sample table
4 Answers, 1 is accepted
Hi Jochen,
Do I understand correctly that you are trying to use the ASP.NET Core HTML helpers in an Angular2+ application? If that is the case, note that the Kendo UI for jQuery suite, while working in certain cases, is not supported by Telerik in an Angular2+ application as we offer a separate suite of native Angular 2 UI components. For an Angular2+ scenario, I would suggest considering using the Kendo UI for Angular Window.
The Angular2+ suite also has a grid widget, that you can review on the link below:
https://www.telerik.com/kendo-angular-ui/components/grid/
I hope the above helps.
Regards,
Aleksandar
Progress Telerik
Rank 1
In the project we habe build an example of the problem.
Have you any advice, solution or workaround?
thanks in advance
Hello Jochen,
Thank you for the additional details and the sample provided. I was able to run the application and observe the issue. Inspecting the code I noticed that a <body> tag is available twice - once in the index.html file and once in the app.component.html file. Removing the second <body> tag resolves the issue observed:
<div>
<app-nav-menu></app-nav-menu>
<div class="container">
<router-outlet></router-outlet>
</div>
</div>
I hope this helps.
Regards,
Aleksandar
Progress Telerik
Rank 1
It works!
Thank you very much!