Open Closed

Telerik components Kendo UI #7998


User avatar
0
rwright-ruhealth created
  • 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.


5 Answer(s)
  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi

    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

  • User Avatar
    0
    rwright-ruhealth created

    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.

  • User Avatar
    0
    liangshiwei created
    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
    {
        //...
    }
    
    1. Use layout hook https://abp.io/docs/latest/framework/ui/mvc-razor-pages/layout-hooks
  • User Avatar
    0
    rwright-ruhealth created

    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 
    { 
        //... 
    } 
    
    1. 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.

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    okay : )

Made with ❤️ on ABP v9.1.0-preview. Updated on November 11, 2024, 11:11