New to Telerik UI for ASP.NET Core? Download free 30-day trial

Declarative Initialization

By default, the HTML and Tag Helpers output an initialization script after the helper's HTML markup. However, this behavior may not always be desirable. For instance, when the Content Security Policy (CSP) is enabled, the inline scripts are blocked, or when the components are nested within each other and are loaded through Kendo UI templates, and more. In such scenarios, you can switch to declarative component initialization, where the component serializes an MVVM declarative configuration instead of an inline initialization script.

Currently, the declarative initialization is supported only when using HTML Helpers.

Using Declarative Initialization

The declarative initialization feature serializes the helper declaration as an MVVM configuration and initializes the component from the DOM elements on the client.

To enable the declarative initialization:

  1. Add the UseMvvmInitialization() method in the HTML Helper declaration. This option will instruct the respective component to serialize its helper declaration as an MVVM declarative configuration.
  2. Call the kendo.bind() method after the component's definition by passing the jQuery selector of the element that wraps the helper declaration or the Name() of the component. It is important to call the kendo.bind() in the $(document).ready() function.

The following example illustrates the generated declarative configuration of a TextBox component when declarative initialization is enabled:

  • TextBox declaration

        <div id="textbox-container">
            @(Html.Kendo().TextBox()
                .Name("textbox")
                .Label(l => l.Content("Comments:"))
                .UseMvvmInitialization(true)
            )
        </div>
    
        <script>
            $(document).on("ready", function () {
                kendo.bind($("#textbox-container"), {});
            });
        </script>
    
  • Generated declarative configuration

        <div id="textbox-container">
            <label class="k-label k-input-label" for="textbox">Comments:</label>
            <span class="k-input k-textbox k-input-solid k-input-md k-rounded-md">
                <input data-label="{'content':'Comments:'}" data-role="textbox" id="textbox" name="textbox" type="text" value="" aria-disabled="false" class="k-input-inner" autocomplete="off" style="width: 100%;">
            </span>
        </div>
    

For a runnable example, refer to the demo on using the declarative initialization of the TextBox.

Supported Components

The following table provides a list of the Telerik UI for ASP.NET Core components that support the declarative initialization feature.

Component Documentation
AutoComplete AutoComplete Overview
ColorPicker ColorPicker Overview
ComboBox ComboBox Overview
DateInput DateInput Overview
DatePicker DatePicker Overview
DateRangePicker DateRangePicker Overview
DateTimePicker DateTimePicker Overview
DropDownList DropDownList Overview
DropDownTree DropDownTree Overview
FlatColorPicker FlatColorPicker Overview
MaskedTextBox MaskedTextBox Overview
MultiSelect MultiSelect Overview
NumericTextBox NumericTextBox Overview
TextArea TextArea Overview
TextBox TextBox Overview
TimeDurationPicker TimeDurationPicker Overview
TimePicker TimePicker Overview
Upload Upload Overview

See Also

In this article