Telerik components Kendo UI #7998

rwright-ruhealth created 6 months ago

ABP Framework version: vX8.3.1
UI Type: MV) Oracle, MySQL, PostgreSQL, etc..) / MongoDB
Tiered (for MVC) or Auth Server Separated (for Angular): Tiered
Exception message and full stack trace:
Steps to reproduce the issue:

create an abp project using ABP Studio Tiered
Create a Telerik App as found in the ABP Framework Example site on Github.
Add your npm telerik packages for kendo-ui, etc.
configure your BundleContributor / KendoScriptContributor
Use the page example and the KendoViewComponent.
Add the currency control to a page using Keno TagHelpers kendo-numerictextbox as in the example
Should work and display the kendo control.
Problem: Typically, I defer the control so that the page source does not become littered with Kendo's script tags.

By having jQuery in the head, this seems unavoidable.
Is there anyway to have Kendo controls render deferred without moving jquery from the head tag?
When deferred=true is set in the kendo-numeric tag helper, it fails to render a kendo control.
I would like to position the kendo scripts before the jquery script in the head. Is this possible via the BundleContributor or another method?

Thanks in advance.

Go to accepted answer

liangshiwei created 5 months ago

Support Team Fullstack Developer

I think you can't do it.

Add the Kendo UI scripts. The Kendo UI script files required by UI for ASP.NET Core must be loaded in the <head> tag after the jQuery script:

https://docs.telerik.com/aspnet-core/getting-started/first-steps

rwright-ruhealth created 5 months ago

Thanks for your reply. How do I put the scripts in the head tag using ABP methods with BundleContributor (After jQuery)?
YES: I do have a license for Telerik Ultimate. I am using licensed versions with my license file correctly detected.
SO: Telerik controls are working. I would like to defer scripts so that each generated control is not surrounded by Telerik generated script tags.

I researched this issue in the past. It seems there is a way to specify where scripts are placed and in which specific order. For example, the myriad of scripts used by ABP are not placed by accident.

liangshiwei created 5 months ago

Support Team Fullstack Developer

Hi,

There are two ways to put it.

1 Use BundleContributor https://abp.io/docs/latest/framework/ui/mvc-razor-pages/bundling-minification#contributor-dependencies

[DependsOn(typeof(JQueryScriptContributor))] //Define the dependency
public class MyExtensionScriptBundleContributor : BundleContributor
{
    //...
}

Use layout hook https://abp.io/docs/latest/framework/ui/mvc-razor-pages/layout-hooks

rwright-ruhealth created 5 months ago

Hi,

There are two ways to put it.

1 Use BundleContributor https://abp.io/docs/latest/framework/ui/mvc-razor-pages/bundling-minification#contributor-dependencies
[DependsOn(typeof(JQueryScriptContributor))] //Define the dependency 
public class MyExtensionScriptBundleContributor : BundleContributor 
{ 
    //... 
} 
Use layout hook https://abp.io/docs/latest/framework/ui/mvc-razor-pages/layout-hooks

Thanks for your quick reply. Will attempt to impliment and check results. I forgot all about the layout-hooks. As I was asking the question, I could not for the life of me remember the term, although I had used the layout-hooks in a previous project.