Answered by:
Modifying CssClass and such on SideBar and Step when using LayoutTemplate for Wizard

Question
-
User-522844562 posted
Hey
I have the following code:
protected void Wizard1_ActiveStepChanged(object sender, EventArgs e)
{
if (Wizard1.ActiveStepIndex == 0)
{
Wizard1.SideBarStyle.CssClass = "hidden";
Wizard1.StepStyle.CssClass = "pricing-step step";
}
else
{
Wizard1.SideBarStyle.CssClass = "sidebar";
Wizard1.StepStyle.CssClass = "step";
}
}Originally I used the default template for my wizard and this worked fine. It added the correct class on the first step. However after making a LayoutTemplate like so:
<asp:Wizard ID="Wizard1" runat="server">
<LayoutTemplate>
<div class="wizard">
<div class="headPlaceHolder wizard-header">
<asp:PlaceHolder ID="headerPlaceHolder" runat="server" />
</div>
<div class="sidePlaceHolder sidebar">
<asp:PlaceHolder ID="sideBarPlaceHolder" runat="server" />
</div>
<div class="stepPlaceHolder step">
<asp:PlaceHolder ID="WizardStepPlaceHolder" runat="server" />
</div>
<div class="navPlaceHolder navigation">
<asp:PlaceHolder ID="navigationPlaceHolder" runat="server" />
</div>
</div>
</LayoutTemplate>Does anyone know if I need to do something differently to target the wizard sidebar and step from the backend with a LayoutTemplate?
Friday, August 10, 2018 1:31 PM
Answers
-
User-893317190 posted
Hi Fayze,
You should add a listview with the id “SideBarList” and add a asp:LinkButton with the id “SideBarButton” as the step button of your wizard in your the listview's itemTemplate .
To access the sidebar , you could use the FindControl method of Wizard and change the control’s cssclass which represents your sidebar.
Below is my code.
<style> .sidebar1{ background-color:lawngreen } .sidebar2{ background-color:brown } .step1{ background-color:burlywood } .step2{ background-color:red } </style> <asp:Wizard ID="Wizard1" runat="server" OnActiveStepChanged="Wizard1_ActiveStepChanged" > <HeaderTemplate> Header content. </HeaderTemplate> <SideBarTemplate> <asp:ListView ID="SideBarList" runat="server" ItemPlaceholderID="ItemPlaceHolder"> <ItemTemplate> <li> <asp:LinkButton ID="SideBarButton" runat="server"></asp:LinkButton> </li> </ItemTemplate> <LayoutTemplate> <ul runat="server" id="ul"> <asp:PlaceHolder ID="ItemPlaceHolder" runat="server"></asp:PlaceHolder> </ul> </LayoutTemplate> </asp:ListView> </SideBarTemplate> <WizardSteps> <asp:WizardStep ID="WizardStep1" runat="server" Title="Step 1"> <div runat="server" id="step1"> Step 1 Content.</div> </asp:WizardStep> <asp:WizardStep ID="WizardStep2" runat="server" Title="Step 2"> <div runat="server" id="step2"> Step 1 Content.</div> </asp:WizardStep> </WizardSteps> <LayoutTemplate> <div class="wizard"> <div class="headPlaceHolder wizard-header"> <asp:PlaceHolder ID="headerPlaceHolder" runat="server" /> </div> <div class="sidePlaceHolder sidebar"> <asp:PlaceHolder ID="sideBarPlaceHolder" runat="server" /> </div> <div class="stepPlaceHolder step" id="step" > <asp:PlaceHolder ID="WizardStepPlaceHolder" runat="server" /> </div> <div class="navPlaceHolder navigation"> <asp:PlaceHolder ID="navigationPlaceHolder" runat="server" /> </div> </div> </LayoutTemplate> </asp:Wizard>
Code behind.
protected void Wizard1_ActiveStepChanged(object sender, EventArgs e) { //get the listview in the wizard System.Web.UI.WebControls.ListView list = (Wizard1.FindControl("sideBarList") as System.Web.UI.WebControls.ListView); //get the ul in the listview and change its cssclass according to the activestepindex of wizard HtmlGenericControl ul = list.FindControl("ul") as HtmlGenericControl; if (Wizard1.ActiveStepIndex == 0) { ul.Attributes.Add("class", "sidebar1"); Wizard wizard = Wizard1; //get the wizardstep WizardStep wizardStep1 = Wizard1.FindControl("WizardStep1") as WizardStep; //get the div control in the wizardstep and change its class HtmlGenericControl step1 = wizardStep1.FindControl("step1") as HtmlGenericControl; step1.Attributes.Add("class", "step1 "); } else { ul.Attributes.Add("class", "sidebar2"); WizardStep wizardStep2 = Wizard1.FindControl("WizardStep2") as WizardStep; HtmlGenericControl step2 = wizardStep2.FindControl("step2") as HtmlGenericControl; step2.Attributes.Add("class", "step2"); } }
The result.
Best regards ,
Ackerly Xu
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Monday, August 13, 2018 7:03 AM