# Adding Templates at Designtime

This examples below show how to use the [Template Design Surface](https://www.telerik.com/products/aspnet-ajax/documentation/controls/panelbar/design-time/template-design-surface) to add a **RadControl** to an expandable/collapsible PanelItem by using either a **ContentTemplate** or an **ItemTemplate**.

## Content Template

In this example, a RadCalendar control and a Label are added in the **ContentTemplate** of a root PanelItem.

1. Drag a **RadPanelbar** from the toolbox onto your Web page.

2. Create one root item with text "Calendar".

3. From the Smart Tag that appears when you drop the **RadPanelbar**, choose **Edit Templates**.

4. The Template Design Surface appears, set for editing the **ContentTemplate**. The template design surface of the only Item will appear:![Content Template](https://www.telerik.com/products/aspnet-ajax/documentation/assets/77dc1d8693c0e6be5ff4f99bbad756e3/panelbar_contenttemplate.png)

5. Drag a **RadCalendar** control from the toolbox onto the Template Design Surface:
   ![Content Template With Calendar](https://www.telerik.com/products/aspnet-ajax/documentation/assets/d78c1c8527e0769b798a083f6eadd91a/panelbar_contenttemplatewithcalendar.png)

6. Drag a Label control from the toolbox onto the Template Design surface under the calendar:
   ![Content Template With Calendar And Label](https://www.telerik.com/products/aspnet-ajax/documentation/assets/94a91c65aa00d8d1a9c7f8098677f2c0/panelbar_contenttemplatewithcalendarandlabel.png)

7. Right click on the **Label** control, choose **Properties** from its context menu, and set the **Text** property to "Select Date".

8. Right click on the **RadCalendar** control, choose **Properties** from its context menu, set the **AutoPostBack** property to **true** and the **EnableMultiSelect** property to **false**.

9. Give the **RadCalendar** control a **SelectionChanged** event handler:

   ```C#
   	
   protected void RadCalendar_SelectionChanged(object sender, SelectedDatesEventArgs e) 
   { 
   	Label1.Text = RadCalendar1.SelectedDate.ToShortDateString(); 
   }
   	
   ```

   ```VB.NET
   	
   Protected Sub RadCalendar_SelectionChanged(ByVal sender As Object, ByVal e As SelectedDatesEventArgs)

   	Label1.Text = RadCalendar1.SelectedDate.ToShortDateString()

   End Sub
   	
   ```

   > note The code in the event handler directly accesses from inside the Content Template both the Calendar and the Label by their IDs. This is a feature of Content Templates.

10. Use the Smart Tag anchor to display the Edit Templates pop-up, and choose **End Template Editing** to close the Template Design Surface.

11. In the Smart Tag for the **RadPanelBar** control, click on **Add RadAjaxManager**.

12. In the **RadAjaxManager Property Builder**, select the calendar as a control that initiates AJAX requests. In the controls that need to be updated, select the label:![Content Template Ajax Manager](https://www.telerik.com/products/aspnet-ajax/documentation/assets/bc1d344ee41dbe7628ad3eba29b30645/panelbar_contenttemplateradajaxmanagerconfig.png)

13. Run the application. When you click on the root item, the calendar is displayed. When you select a date from the calendar, the "Example" label reflects the selected date:
    ![Content Template Example](https://www.telerik.com/products/aspnet-ajax/documentation/assets/dd3e84384d8a51befb6cd89cda2da7c9/panelbar_contenttemplateexample.png)

## Item Template

This example shows how to use the [Template Design Surface](https://www.telerik.com/products/aspnet-ajax/documentation/controls/panelbar/design-time/template-design-surface) to add a **RadColorPicker** control to an expandable/collapsible PanelItem by using the **ItemTemplate**.

1. Drag a **RadPanelbar** from the toolbox onto your Web page.

2. Create one root item with text "Color Picker" and add a child item to it with no text.

3. From the Smart Tag that appears when you drop the **RadPanelbar**, choose **Edit Templates**.

4. The Template Design Surface appears, set for editing the **ItemTemplate**.

5. Select the child item to display its template designsurface
   ![Item template](https://www.telerik.com/products/aspnet-ajax/documentation/assets/deca697d8e18ba1cb102950d0cc7023a/panelbar_itemtemplate.png)

6. Drag a **RadColorPicker** control from the toolbox onto the Template Design Surface:
   ![Color picker in template design surface](https://www.telerik.com/products/aspnet-ajax/documentation/assets/463bbeedf929392ebba794615a69a0b8/panelbar_colorpickerintemplate.png)

7. Drag a Label control from the toolbox onto the Template Design surface under the color picker:
   ![ColorPicker InTemplate](https://www.telerik.com/products/aspnet-ajax/documentation/assets/3169c7248ed78e79c933f0e9055522ab/panelbar_templateexample2.png)

8. Right click on the **Label** control, choose **Properties** from its context menu, and set the **Text** property to "Example".

9. Right click on the **RadColorPicker** control, choose **Properties** from its context menu, and set the **AutoPostBack** property to **true**.

10. Give the **RadColorPicker** control a **ColorChanged** event handler:

    ```C#
    	
    protected void RadColorPicker1_ColorChanged(object sender, EventArgs e) 
    { 
    	RadColorPicker picker = sender as RadColorPicker; 
    	Label label = picker.Parent.FindControl("Label1") as Label; 
    	label.ForeColor = picker.SelectedColor; 
    }
    	
    ```

    ```VB.NET
    	
    Protected Sub RadColorPicker1_ColorChanged(ByVal sender As Object, ByVal e As EventArgs) Handles RadColorPicker1.ColorChanged

    	Dim picker As RadColorPicker = CType(sender, RadColorPicker)
    	Dim label As Label = CType(picker.Parent.FindControl("Label1"), Label)
    	label.ForeColor = picker.SelectedColor

    End Sub
    	
    ```

    The event handler finds the label in the panel item's template and sets its font color to the color that was selected in the color picker.

11. Use the Smart Tag anchor to display the Edit Templates pop-up, and choose **End Template Editing** to close the Template Design Surface.

12. In the Smart Tag for the **RadPanelBar** control, click on **Add RadAjaxManager**.

13. In the **r.a.d.ajax Property Builder**, select the color picker as a control that initiates AJAX requests. In the controls that need to be updated, select the label:![Ajax Enabled Template](https://www.telerik.com/products/aspnet-ajax/documentation/assets/f01c760fc427e9f1431f55d99bcc2ff6/panelbar_ajaxenabletemplate.png)

14. Run the application. When you click on the root item, the color picker is displayed. When you select a color from the color picker, the "Example" label reflects the selected color:
    ![ColorPicker InTemplate](https://www.telerik.com/products/aspnet-ajax/documentation/assets/185aec676467c7dd30a5b232afd36ae4/panelbar_templateexample.png)

## See Also

* [Templates Overview](https://www.telerik.com/products/aspnet-ajax/documentation/controls/panelbar/templates/overview)