Customize ASP.NET Wizard SideBar Template [Snippet]
If you have used the ASP.NET Wizard Control and have tried to use the default Sidebar template, you know that it does not allow you to get rid of the LinkButton controls. Some of us, however, don't want users to skip all around our wizard, so we need a way to show the users where they are but prevent them from screwing it all up.
Here's a quick hack that will do just that. Basically, the theory is that the DataList control in the Sidebar template has to be there along with a LinkButton. But you don't have to show it to the user, do you? All we do is attach a PreRender event handler on the DataList to grab all the wizard steps and duplicate them as labels in a separate label control.
Page with Wizard Control<SideBarTemplate> <asp:Label ID="SideBarInfo" OnPreRender="InitSideBarLbl" runat="server" /> <asp:DataList ID="SideBarList" OnPreRender="LoadSideBar" RepeatLayout="Flow" Style="display:none;" runat="server"> <ItemTemplate> <asp:LinkButton ID="SideBarButton" Visible="false" runat="server"></asp:LinkButton> </ItemTemplate> <SelectedItemStyle Font-Bold="True" CssClass="Wizard-Sidebar-Selected" /> </asp:DataList> </SideBarTemplate>Then, in your Code-Behind:
Label SideBarInfo; // Hide all LinkButton controls and duplicate into labels! protected void LoadSideBar(object s, EventArgs e) { DataList me = (DataList)s; // Reset label (postbacks) SideBarInfo.Text = ""; // Loop through datalistitems foreach (DataListItem item in me.Items) { // Each list item LinkButton btn = (LinkButton)item.FindControl("SideBarButton"); if (btn != null) { Label newLabel = new Label(); newLabel.Text = btn.Text; // Current step? if (me.SelectedItem == item) { newLabel.CssClass = me.SelectedItemStyle.CssClass; } // Styled divs SideBarInfo.Text += "<div class='" + newLabel.CssClass + "'>" + newLabel.Text + "</div>"; } } } protected void InitSideBarLbl(object s, EventArgs e) { SideBarInfo = (Label)s; }
See? Easy as pie. Feel free to improve it! And if you do, let me know how in the comments.

0 Comments:
Post a Comment
Links to this post:
Create a Link
<< Home