Module Initialization
As of the 2024 Q4, the Telerik UI for ASP.NET MVC components allow you to initialize them as ECMAScript modules.
ECMAScript Modules (ESM) is a type of specification that enables you to load JavaScript resources in a modular manner. JavaScript modules enable you to have one single file as a script reference. And use import and export statements to dynamically load all other dependencies. The specification is a proponent for writing modular code in the modern Web world.
More information about the ECMAScript Modules peculiarities in context of the Kendo UI source code is available here: ECMAScript Modules
Initializing Components as Modules
To initialize the Telerik UI for ASP.NET MVC components as JavaScript modules, apply either of the following approaches:
Initializing Specific Components as Modules
To initialize specific components as modules, use the AsModule() configuration method.
@(Html.Kendo().Button()
.Name("primaryTextButton")
.Content("Primary Button")
.AsModule(true)
)
Initializing Components Globally as Modules
To initialize components globally as modules:
Enable the RenderAsModule setting in the KendoMvc.Setup method that registers the Kendo UI service within the Global.asax.cs file:
KendoMvc.Setup(options =>
{
options.RenderAsModule = true;
});
Deferring Components as Modules
To defer the initialization script of the Telerik UI for ASP.NET MVC components as JavaScript modules, apply either of the following approaches:
Deferring Specific Components as a Module
To defer specific components as a module, use the additional renderAsModule method argument.
The
renderScriptTagsmethod argument should be explicitly set totrue.
@(Html.Kendo().Button()
.Name("primaryTextButton")
.Content("Primary Button")
.Deferred()
)
@(Html.Kendo().DeferredScripts(renderScriptTags: true,renderAsModule: true))
To render the deferred initialization script of a particular helper, use the DeferredScriptsFor() method.
@(Html.Kendo().Button()
.Name("primaryTextButton")
.Deferred()
)
@(Html.Kendo().DeferredScriptsFor(name: "primaryTextButton",
renderScriptTags:true, renderAsModule: true))
Deferring Components Globally as Modules
To defer components globally, use the additional renderAsModule method argument.
@(Html.Kendo().Button()
.Name("component1")
.Content("Component 1")
)
@(Html.Kendo().Button()
.Name("component2")
.Content("Component 2")
)
@(Html.Kendo().Button()
.Name("component3")
.Content("Component 3")
)
@(Html.Kendo().DeferredScriptFile(renderAsModule: true))
Using Script Attributes
As of 2024 Q4, the Telerik UI for ASP.NET MVC components allow you to supplement attributes to the initialization script of the component. By using the ScriptAttributes() configuration method.
@(Html.Kendo().Button()
.Name("primaryTextButton")
.Content("Primary Button")
.ScriptAttributes(new { type = "module" })
)
If both the AsModule() and ScriptAttributes() configuration methods are utilized, the type attribute will be predominantly taken from the AsModule() configuration. In cases where this behavior needs to be overriden, use the additional overrideAttributes boolean argument for the ScriptAttributes() configuration—Applicable for the HTML Helper only.
@(Html.Kendo().Button()
.Name("BNT")
.AsModule(true)
.ScriptAttributes(new { type = "text/javascript"}, true)
)