Remove From My Forums

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

Question
0

Sign in to vote

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

Answered by:

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

Question

Answers