Using the Wizard control as a sidebar navigator

You can easily transform the Wizard control as a sidebar navigator by simply hiding the navigation buttons at the bottom as shown below.

wizard_profile

To do this, add a Wizard control to your page. Under "Wizard Tasks", convert the StartNavigation, StepNavigation and FinishNavigation contents to templates. View the source of the page and make the navigation buttons hidden.

<asp:Wizard ID="Wizard1" runat="server" ActiveStepIndex="0">

    <StartNavigationTemplate>

        <asp:Button ID="StartNextButton" runat="server" CommandName="MoveNext" Text="Next"

            Visible="false"/>

    </StartNavigationTemplate>

    <StepNavigationTemplate>

        <asp:Button ID="StepPreviousButton" runat="server" CausesValidation="False" CommandName="MovePrevious"

            Text="Previous" Visible="false"/>

        <asp:Button ID="StepNextButton" runat="server" CommandName="MoveNext" Text="Next"

            Visible="false"/>

    </StepNavigationTemplate>

    <WizardSteps>

        <asp:WizardStep runat="server" Title="Step 1">

        </asp:WizardStep>

        <asp:WizardStep runat="server" Title="Step 2">

        </asp:WizardStep>

    </WizardSteps>

    <FinishNavigationTemplate>

        <asp:Button ID="FinishPreviousButton" runat="server" CausesValidation="False" CommandName="MovePrevious"

            Text="Previous" Visible="False"/>

        <asp:Button ID="FinishButton" runat="server" CommandName="MoveComplete" Text="Finish"

            Visible="false"/>

    </FinishNavigationTemplate>

</asp:Wizard>

You can now start adding controls into each "wizard step".

Make sure validators, if any, are assigned a unique ValidationGroup to prevent them from being fired when you click on wizard step on the sidebar.

4 Comments

  • While it works well for some scenarios as a sidebar navigation control, be aware its implications on performance:


    1. It will keep track control's viewstate for all steps (all controls on the page regardless their visibilities).

    2. All controls on the page will go through event lifecycles regardless their visibilities.

  • Nice article, but appears incomplete, started reading and felt like I was left alone at the end without knowing what to do next. Please try to complete it!

  • Hi Raj Kaimal, just a question about this article. How can I get that grouping line ("Change password") as we can see on the image grouping the passwords fields ? Is there a special control to do it?

    Thanks a lot for your articles ! They very nice and useful.

  • Leonardo,

    Use a Panel WebControl with the GroupingText property defined.

Comments have been disabled for this content.