Use PartialPage on Wizard Step

[Marc]

I cannot seem to get a partial page to render properly on a wizard step. Can anyone locate a code example that accomplishes this?

What I have is:

@(Html.Kendo().Wizard()
    .Name("wizard")
    .HtmlAttributes(new { @novalidate = "" })
    .Steps(steps =>
    {
        steps
            .Add().ContentId("upload")
            .Buttons(b =>
            {
                b.Next();
            });
        steps
            .Add().ContentId("validate")
            .Buttons(b =>
            {
                b.Previous();
                b.Next();
            });
    })
    .Events(events =>
    {
        events.Done("onWizardDone");
    }))

<script id="uploadBillOfLading" type="text/kendo-template">
    @await Html.PartialAsync("_Upload")
</script>
<script id="validateBillOfLading" type="text/kendo-template">
    @await Html.PartialAsync("_Validate")
</script>

 

The result is for step 1 (upload) to be displayed as though it were part of the wizard and step 2 (validate) is also displayed but partially in the wizard and partially outside...clearly the wizard is showing all step markup at all time. Do I have to hide/show the step markup pragmatically?

Any and all assistance is appreciated.

Marc.

[Neli]

Hi Marc,

The ContentId expects the id of the template that holds the content. Could you please try to modify the code as demonstrated below:

@(Html.Kendo().Wizard()
    .Name("wizard")
    .HtmlAttributes(new { @novalidate = "" })
    .Steps(steps =>
    {
        steps
            .Add().ContentId("uploadBillOfLading")
            .Buttons(b =>
            {
                b.Next();
            });
        steps
            .Add().ContentId("validateBillOfLading")
            .Buttons(b =>
            {
                b.Previous();
                b.Next();
            });
    })
    .Events(events =>
    {
        events.Done("onWizardDone");
    }))
 
<script id="uploadBillOfLading" type="text/kendo-template">
    @await Html.PartialAsync("_Upload")
</script>
<script id="validateBillOfLading" type="text/kendo-template">
    @await Html.PartialAsync("_Validate")
</script>

Please try the suggestion above and let me know if it is helpful for resolving the issue.

Regards,
Neli
Progress Telerik

[Marc]

Thanks for the reply, however, that is not the issue. I had neglected to properly adjust my sample code. Let's assume the ids match correctly as you have indicated (as they do in my live code).

Let's focus on the notion that it appears partial views do not work properly.

Any other ideas?

[Neli]

Hi Marc,

Attached you will find a sample project that contains a basic Wizard configuration. The Wizard steps are loading partials as discussed in the previous replies. Could you please try to modify the sample project in order to replicate the described behavior and send it back for a review? This way we could take a look more closely and advise you further. 

Looking forward to your reply.

Regards,
Neli
Progress Telerik

[candice]

Hi

This is an issue also for me.

 

I have a wizard and one some of the partials have more than one kendo tool for example a radial gauge and a slider. The first one displays in the wizard content area and the other outside of it. Can you please assist me with this. I tried downloading the zip file as well but couldn't get it building. 

Kind Regards

 

[Stoyan]

Hi Candice, 

I noticed that a similar question has already been answered in this forum thread.

To sum up the response there - the most likely reason of this behavior is that the Components that should be inside the Wizard are rendered before it does.

To overcome this use the deferred initialization property of the Components:

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

Then аt the bottom of the page call the .DeferredScripts() method to render all deferred Components:

@Html.Kendo().DeferredScripts();