Wijmo Open for Juice UI Extender Controls / FormDecorators / FormDecorator Extender Controls Tutorial / Step 1 of 3: Setting up the Project
Step 1 of 3: Setting up the Project

First add some standard controls to your page.

  1. Create an ASP.NET Web application with a ScriptManager control and install Juice UI and the Wijmo Juice libraries to your project via NuGet.
  2. Add the following markup to add CheckBoxes, a DropDownList, RadioButtons, a Button, and a TextBox to the main content of  your page.
    <ul>        
    
            <li>        
    
              <label>TextArea</label>
              <asp:TextBox runat="server" ID="TextBox3" TextMode="MultiLine"></asp:TextBox>        
    
            </li>
    
           
    
            <li>        
    
                <label>Dropdown with Optgroups</label>        
    
                <asp:DropDownList runat="server" ID="DropDownList2">
                <asp:ListItem Text="A"></asp:ListItem>
                <asp:ListItem Text="B"></asp:ListItem>
                <asp:ListItem Text="C"></asp:ListItem>
                <asp:ListItem Text="D"></asp:ListItem>
                <asp:ListItem Text="E"></asp:ListItem>
                <asp:ListItem Text="F"></asp:ListItem>
    
                <asp:ListItem Text="G"></asp:ListItem>
    
                <asp:ListItem Text="H"></asp:ListItem>
                <asp:ListItem Text="I"></asp:ListItem>        
    
                <asp:ListItem Text="J"></asp:ListItem>        
    
                <asp:ListItem Text="K"></asp:ListItem>
                <asp:ListItem Text="L"></asp:ListItem>      
    
                <asp:ListItem Text="M"></asp:ListItem>
    
                </asp:DropDownList>
    
            </li>
    
            
    
            <li>
                <label>CheckBox</label>
    
                <asp:CheckBox runat="server" ID="CheckBox1" Text="checkbox1" />
    
                <asp:CheckBox runat="server" ID="CheckBox2" Text="checkbox2" />
                <asp:CheckBox runat="server" ID="CheckBox3" Text="checkbox3" />        
    
                <asp:CheckBox runat="server" ID="CheckBox4" Text="checkbox4" />        
    
            </li>
    
            
    
            <li>
    
                <label>Radio</label>        
    
                <asp:RadioButton ID="RadioButton1" GroupName="radiobutton1" runat="server" Text="radio1" />        
    
                <asp:RadioButton ID="RadioButton2" GroupName="radiobutton1" runat="server" Text="radio2" />        
    
                <asp:RadioButton ID="RadioButton3" GroupName="radiobutton1" runat="server" Text="radio3" />
                <asp:RadioButton ID="RadioButton4" GroupName="radiobutton1" runat="server" Text="radio4" />        
    

             </li>

             <li>
                 <label>Button</label>
                 <asp:Button runat="server" ID="Button1" Text="Submit1" />        
             </li>        
     </ul>

Now you can add the corresponding extender controls.