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:
- 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. - Call the
kendo.bind()
method after the component's definition by passing the jQuery selector of the element that wraps the helper declaration or theName()
of the component. It is important to call thekendo.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 |