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

• Content Security Policy
• Deferred Initialization