Components render outside of wizard container

[candice]

Hi

 

I have a wizard that loads partials as steps. Whenever I add more than one kendo component (for example a gauge and a slider) onto the same partial the second component renders outside of the wizards' container.

 

Please assist with this.

 

Kind Regards

[Alexander]

Hi Candice,

I noticed that this is a duplicate question of a similar support thread that you have recently opened. Nevertheless, for the benefit of the community, I am also attaching my reply here:

Upon further examination, I noticed that the sporadic behavior would most notably stem from the fact that the script of the Gauge and Slider controls is rendered immediately after the HTML markup, where the components are nested in the Wizard and loaded through a template. 

Thus, I would suggest calling the "Deferred()" method of both the Slider and Gauge Helpers and rendering the deferred initialization script after the template:

@(Html.Kendo().RadialGauge()
    .Name("gauge")
    ...
    .Deferred()
) 
@(Html.Kendo().Slider()
    ...
    .Deferred()
)

And calling the @Html.Kendo().DeferredScripts() method:

<script id="familyInformation" type="text/kendo-template">
    @await Html.PartialAsync("_FamilyInformation")
</script>
<script id="expectedClaims" type="text/kendo-template">
    @await Html.PartialAsync("_ExpectedClaims")
</script>

@Html.Kendo().DeferredScripts();

For more information about deferred initialization, refer to the following article:

• Deferred Initialization - (Documentation)

Kind Regards,
Alexander
Progress Telerik