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

  • 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