Deferred Initialization

By default, the helpers output the initialization script of the component immediately after its HTML markup. This scenario may not always be desired—for example, if the script files are registered at the bottom of the page, when you nest components, or when the Content Security Policy (CSP) is enabled.

The following example illustrates how the initialization script of a Button component is generated after its HTML markup:

• Button declaration

  HtmlHelperTagHelper

  Razor

      @(Html.Kendo().Button()
          .Name("primaryTextButton")
          .ThemeColor(ThemeColor.Primary)
          .Content("Primary Button")
      )

  Razor

       <kendo-button name="primaryTextButton" theme-color="ThemeColor.Primary">
          Primary Button
      kendo-button>

• Generated HTML markup and initialization script

  HTML

      <button id="primaryTextButton" name="primaryTextButton" data-role="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary" type="button" role="button" aria-disabled="false" tabindex="0"><span class="k-button-text">Primary Buttonspan>button>
      <script>kendo.syncReady(function(){jQuery("#primaryTextButton").kendoButton({"themeColor":"primary"});});script>

To defer the initialization script of the Telerik UI for ASP.NET Core components in the application, apply either of the following approaches:

• Defer only specific components
• Defer all components globally
• Defer dynamically loaded components

Deferring Specific Components

To defer individual components:

1. Add the Deferred() method of the HTML helper or enable the deferred attribute of the Tag helper. This option suppresses the immediate rendering of the