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

Integration With RadControls

Unaffected Telerik controls

RadAsyncUpload, RadUpload, RadAutoCompleteBox, RadBarcode, RadBinaryImage, RadButton, RadCalendar, RadChart, RadComboBox, RadDataPager, RadEditor, RadFileExplorer, RadGauge, RadHtmlChart, RadImageEditor, RadListBox, RadRating, RadSiteMap, RadSlider, RadSocialShare, RadTabStrip, RadTagCloud

Affected Telerik controls

More details on decorating Standard Controls

Control	Effect
RadCaptcha	Decorated input
RadColorPicker	Decorated input that displays the hexadecimal code of the hovered color
RadDatePicker, RadTimePicker, RadMonthYearPicker	Their inputs cannot be decorated
RadDock	Controls inside its ContentTemplate are decorated
RadFilter	Checkbox from BoolField and Input from TextField are decorated. Input from NumericField and DateField cannot be decorated
RadGrid	Controls inside ItemTemplate of the GridTemplateColumn are decorated; Buttons inside GridButtonColumn: PushButton is decorated; Inputs in the filter are decorated.
RadInput	Can be decorated. Refer to Styling RadInput section below
RadListView	Controls inside ItemTemplate are decorated
RadMenu	Controls inside ItemTemplate are decorated
RadNotification	Controls inside ContentTemplate are decorated
RadOrgChart	Controls inside ItemTemplate are decorated
RadPanelBar	Controls inside ItemTemplate are decorated
RadPivotGrid	In Configuration Panel the Checkboxes are decorated; In Filter WindowRadioButtons are decorated and Checkboxes are not decorated
RadRibbonBar	Controls inside RibbonBarTemplateItem are decorated
RadRotator	Controls inside ItemTemplate are decorated
RadScheduler	The Checkboxes in the NewAppointment dialog are decorated
RadSpell	Button is decorated
RadSplitter	Controls inside RadPane are decorated
RadToolBar	Controls inside ItemTemplate are decorated
RadToolTip	Added Controls to RadToolTip as well as dynamically loaded and displayed Controls on demand are decorated
RadTreeList	Checkboxes in TreeListSelectColumn and TreeListCheckBoxColumn are decorated; Inputs by clicking on Add record/Edit buttons in TreeListEditCommandColumn are decorated; Controls inside ItemTemplate of the TreeListTemplateColumn are decorated
RadTreeView	Controls inside NodeTemplate are decorated
RadWindow	Controls inside ContentTemplate are decorated

Styling RadInput

The various Telerik input controls fetch their own styling through the skinning mechanism all controls from the UI for ASP.NET AJAX suite use. Thus, by default, RadFormDecorator does not style them.

There is a way, however, to use the Form Decorator stying for the RadInput and RadInputManager controls. Below you can find the effects and examples of how to apply them.

RadInput

This section applies to the RadNumericTextBox, RadMaskedTextBox, RadTextBox and RadDateInput controls. They can be fully decorated, or partially decorated, depending on the effect you seek and how you configure them.

Partial Decoration

If you have a Skin set for the Telerik inputs, RadFormDecorator will not modify the inputs appearance. Rounded corners and coloring will not be added to the inputs and only the labels may inherit the generic styling for a <label> that the form decorator provides.

Full Decoration

These controls can be fully decorated when their Skin property is set to empty string (i.e.: Skin="" ). This includes:

the label (if set through the Label property) - color and font are changed
the actual input- rounded corners and coloring are added

It is important to note that when the skin of a control is disabled, left on its own, its appearance will not be correct. For example, date pickers will lose the icon that opens the popup, or their dimensions may change.

To decorate RadInput controls fully, you need to:

ensure the RenderMode of the inpuit and the RadFormDecorator is the same
set the Skin property of the input to an empty string (Skin="")

set the CssClass property of the input to the RadFormDecorator classes depending on the RenderMode:

for the Lightweight RenderMode use CssClass="rfdTextInput"

ASP.NET

  <telerik:RadFormDecorator runat="server" ID="RadFormDecorator1" DecoratedControls="All"
      RenderMode="Lightweight" Skin="Black" />
  <telerik:RadTextBox runat="server" ID="RadTextBox1" Label="Label for generic textbox"
      Skin="" RenderMode="Lightweight" CssClass="rfdTextInput">
  </telerik:RadTextBox>
  <telerik:RadNumericTextBox runat="server" ID="RadNumericTextBox1" Label="Label for numeric textbox"
      Skin="" RenderMode="Lightweight" CssClass="rfdTextInput">
  </telerik:RadNumericTextBox>
  <telerik:RadMaskedTextBox runat="server" ID="RadMaskedTextBox1" Label="Label for masked textbox"
      Skin="" RenderMode="Lightweight" CssClass="rfdTextInput"></telerik:RadMaskedTextBox>
  <telerik:RadDatePicker runat="server" ID="RadDatePicker1"
      Skin="" RenderMode="Lightweight">
      <DateInput CssClass="rfdTextInput" Label="Label for date input"></DateInput>
  </telerik:RadDatePicker>

for the Classic RenderMode use CssClass="rfdRoundedCorners rfdDecorated"

ASP.NET

  <telerik:RadFormDecorator runat="server" ID="RadFormDecorator1" DecoratedControls="All"
      RenderMode="Classic" Skin="Black" />
  <telerik:RadTextBox runat="server" ID="RadTextBox1" Label="Label for generic textbox"
      Skin="" RenderMode="Classic" CssClass="rfdRoundedCorners rfdDecorated">
  </telerik:RadTextBox>
  <telerik:RadNumericTextBox runat="server" ID="RadNumericTextBox1" Label="Label for numeric textbox"
      Skin="" RenderMode="Classic" CssClass="rfdRoundedCorners rfdDecorated">
  </telerik:RadNumericTextBox>
  <telerik:RadMaskedTextBox runat="server" ID="RadMaskedTextBox1" Label="Label for masked textbox"
      Skin="" RenderMode="Classic" CssClass="rfdRoundedCorners rfdDecorated"></telerik:RadMaskedTextBox>
  <telerik:RadDatePicker runat="server" ID="RadDatePicker1" Skin="" RenderMode="Classic">
      <DateInput CssClass="rfdRoundedCorners rfdDecorated" Label="Label for date input"></DateInput>
  </telerik:RadDatePicker>

For the Date/Time pickers, you must set the class to the DateInput and not on the main control.

The form decorator has different default widhts for the inputs in the different render modes. For example, if you are using the Lightweight RenderMode, decorated input widths default to 192px and so if the RadInput width is smaller than that you may have appearance issues.

RadInputManager

To decorate the inputs that are targetted by RadInputManager's settings (TextBoxSetting, NumericTextBoxSetting, DateInputSetting, RegExpTextBoxSetting), you must set Skin property of the input manager to an empty string (Skin="").

Then, the form decorator can add rounded corners and coloring to the inputs as if they were standard input elements.