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

Use PartialPage on Wizard Step

3 Answers 391 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/.

candice
Top achievements
Rank 1
commented on 11 Jan 2023, 05:45 AM

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
Telerik team
commented on 13 Jan 2023, 06:05 PM

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();

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