CODEWITHSUNDEEP
dojowizard
Doug
Doug

Reputation: 143

How do I automatically select the first panel in a declarative dojo wizard?

I have created a declarative dojo wizard in dojo 1.5 that is embedded in a dojo dialog like this:

<div dojoType="dijit.Dialog" id="genWizardDialog" jsId="genWizardDialog" refreshOnShow="true" preventCache="true" title="Title">

<div dojoType="dojox.widget.Wizard" style='height: 375px; width:400px' hideDisabled="true" doneButtonLabel="someLabel">

<div id="wizard1" dojoType="dojox.widget.WizardPane" canGoBack="false" passFunction="panelOneDriver"></div>

<div id="wizard2" dojoType="dojox.widget.WizardPane" passFunction="validateBoxes" style="padding:8px; height:100%;"></div>
....I have some more panels. 

</div>
<!-- Here I have setup the cancel method. -->
<script type="dojo/method" event="cancelFunction">
     //dijit.byId("genWizardDialog").onSelected(0);         
     dijit.byId("genWizardDialog").hide();
</script>
</div>

Everything pretty much works. However, I have 4 panels. If I proceed to panel three and hit cancel. When I then click the button to start the dojo dialog I am already at panel 3! I want to start back at panel 1. As I have already invested time into the declarative approach I am hoping to avoid doing this programmatically. I found site that mentioned an onSelected() method to accomplish this -> http://dojo-toolkit.33424.n3.nabble.com/resetting-wizard-pane-and-contents-on-reopening-wizard-td158660.html, however, this didn't work and stands to reason since looking in the Wizard.js I don't see this method defined!

Upvotes: 1

Views: 1124

Answers (1)

Frode
Frode

Reputation: 5710

In your pasted code, you have the cancelFunction event in the dialog's div, not the wizard's. So move the <script> tag inside the div that has dojoType=dojox.widget.Wizard.

To select a specific wizard pane, you can use the selectChild function.

<script type="dojo/method" event="cancelFunction">
    dijit.byId("genWizardDialog").hide();
    dijit.byId("genWizard").selectChild("wizard1", false);
</script>

In the above, I've assumed that your wizard has an id "genWizard", so you'd have to add that to the wizard's div.

Now the wizard will jump to the first wizard pane when you click its cancel button.

It will not jump to the first wizard pane if you just click the dialog's X button. If you want that too, you need to use the dialog's onHide event.

<script type="dojo/method" event="onHide">
    dijit.byId("genWizard").selectChild("wizard1", false);
</script>

This script tag has to be in the dialog's div, not the wizard's, make sure you get that right.

Upvotes: 1

Related Questions