Deferred Initialization

[Tim]

I added a content security policy and wanted to remove unsafe-inline so I'm deferring components globally.

@Html.Kendo().DeferredScripts()

The problem is that I have other JavaScript code which references components in the jQuery document ready function which now don't work. I think  it's because the components haven't been initialized yet.

When deferring components globally how do you execute JavaScript code after the components have been initialized?

Thank you

[Tsvetomila]

Hi Tim,

The described behavior is likely due to the scripts' execution order.

The DeferredScripts() method generates the necessary script for the component initialization. Therefore, any additional scripts that manipulate the deferred component must be invoked afterwards.

The placement of the DeferredScripts() method is also crucial, as described in step 3 of this article - Deferring Components Globally.

For example:

// 1. Component configuration
@(Html.Kendo().DropDownList()
	.Name("example")
	.DataTextField("Text")
	.DataValueField("Value")
	// ...
	.Deferred()
)
// 2. Component Initialization
@Html.Kendo().DeferredScripts();

// 3. Component Manipulation
<script type="text/javascript">
    $(document).ready(function () {
        var ddl = $("#example").data("kendoDropDownList");
       // ...
    });
</script>
// or this way if in external file
<script src="~/js/DoSomething.js"></script>

Following this order will ensure the component is initialized before the referencing script.

I look forward to hearing whether this implementation helps resolve the issue.

Regards,
Tsvetomila
Progress Telerik

[Tim]

Hi Tsvetomila,

Thanks for your reply. After more testing I have found the issue.

A partial page at the top of the page had a script with a JQuery document ready function which was executing before the deferred scripts at the bottom of the page. Once I moved the partial page script into the bottom of the main page it worked.

In your example above 1. Component configuration has .Deferred(). The documentation seems to indicate that is for deferring specific components. Is it necessary when deferring components globally?

Thank you,

Tim

[Tsvetomila]

Hi Tim,

I am glad to hear that the issue is resolved.

Regarding your question: Yes, the '.Deferred()' method is indeed used to defer specific components. If components are deferred globally, this method is not required.

However, as indicated by the code snippet, the '.DeferredScripts()' method is used. Typically, it is employed in conjunction with the individual '.Deferred()' method. Which is why it was included in the code example.

The global defer option is applied with the '.DeferredScriptFile()' method, which serializes the script tags into a simulated JS file.  

Regards,
Tsvetomila
Progress Telerik

[Tim]

Thank you