New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Adding Templates at Designtime

This examples below show how to use the 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

  5. Drag a RadCalendar control from the toolbox onto the Template Design Surface: Content Template With Calendar

  6. Drag a Label control from the toolbox onto the Template Design surface under the calendar: Content Template With Calendar And Label

  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:

    
    protected void RadCalendar_SelectionChanged(object sender, SelectedDatesEventArgs e) 
    { 
        Label1.Text = RadCalendar1.SelectedDate.ToShortDateString(); 
    }
    
    ````
    
    
    Protected Sub RadCalendar_SelectionChanged(ByVal sender As Object, ByVal e As SelectedDatesEventArgs)
    
        Label1.Text = RadCalendar1.SelectedDate.ToShortDateString()
    
    End Sub
    
    ````
    

    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

  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

Item Template

This example shows how to use the 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

  6. Drag a RadColorPicker control from the toolbox onto the Template Design Surface: Color picker in template design surface

  7. Drag a Label control from the toolbox onto the Template Design surface under the color picker: ColorPicker InTemplate

  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:

    
    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; 
    }
    
    ````
    
    
    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

  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

See Also

In this article