Step 2 of 3: Adding Extender Controls to the Page

In this step, you will add FormDecorator extender controls to associate with the standard controls. You can use the TargetControlID to specify the controls to associate with the Textbox, Button and Dropdown extenders. But since we have multiple checkboxes and radio buttons, we can use the TargetSelector property in place of the TargetControlID property to apply extender functionality on several controls at one time.

Select the DropDownList control, click the smart tag and select Add Extender from the DropDownList Tasks menu.
Select C1DropdownExtender and click OK. If you look at the top of the Default.aspx page in Source view, you'll notice the C1.Web.Wijmo.Extenders.x assembly has been registered, like this:

<%@ Register assembly="C1.Web.Wijmo.Extenders.3" namespace="C1.Web.Wijmo.Extenders.C1FormDecorator" tagprefix="cc1" %>

In Design view, select the TextBox control, click the smart tag and select Add Extender from the TextBox Tasks menu.
Select C1TextboxExtender and click OK.
Select the Button control, click the smart tag and select Add Extender from the Button Tasks menu.
Select C1ButtonExtender and click OK.
In Source view, add the following markup for the C1CheckboxExtender and C1RadioExtender controls.

<cc1:C1CheckboxExtender ID="C1CheckboxExtender1" runat="server"

TargetSelector=":input[type='checkbox']">

</cc1:C1CheckboxExtender>

<cc1:C1RadioExtender ID="C1RadioExtender1" runat="server" TargetSelector=":input[type='radio']">

</cc1:C1RadioExtender>

Now run the project to see the formatted FormDecorators.