Hi All,
Below is a simple yet very powerful hack to make ASP.NET Wizard control do what it should also be able to do but isn’t. That is the “horizontal sidebar for wizard steps”.
So here are the steps:
- Add an ASP.NET wizard control to a page or user control and add wizard steps to it as per your requirement. It will look some what like below:
 |
| Default Appearance of Wizard Control |
- Now add side bar template to this control, like I did in below code snippet.
<SideBarTemplate>
<asp:DataList runat="server" ID="SideBarList" HorizontalAlign="Justify" RepeatDirection="Horizontal">
<ItemTemplate>
<div id="divWizardSampleSidebar" runat="server" class="div-WizardSample-Sidebar-Steps">
<asp:LinkButton runat="server" ID="SideBarButton" Enabled="true" Font-Bold="true" />
div>
ItemTemplate>
asp:DataList>
</tr><tr>
SideBarTemplate>
- In above code lines, everything is normal, except the last second line that is highlighted in green color. This line is the one that is creating magic. After using it, wizard will look like below:
 |
| After Using Hack |
Actually, ASP.NET wizard control renders sidebar with steps and controls in two different "td" tags under same row and here I just injected a pair of opening and closing "tr" between those to make two separate rows for steps and controls. This forced wizard control to render separate rows for both steps and contents.
Now apply some css and make your wizard look a bit more appealing.
If you have better steps to make horizontal sidebar in ASP.NET wizard control then kindly let me know.
