This is a migrated thread and some comments may be shown as answers.

Use PartialPage on Wizard Step

3 Answers 30 Views
Wizard
This is a migrated thread and some comments may be shown as answers.
Marc
Top achievements
Rank 1
Marc asked on 08 Feb 2021, 04:16 PM

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.

3 Answers, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 11 Feb 2021, 12:48 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Marc
Top achievements
Rank 1
answered on 11 Feb 2021, 12:59 PM

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?

0
Neli
Telerik team
answered on 16 Feb 2021, 11:02 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Wizard
Asked by
Marc
Top achievements
Rank 1
Answers by
Neli
Telerik team
Marc
Top achievements
Rank 1
Share this question
or