Last Updated: 31 Oct 2019 11:47 by ADMIN
Release R3 2019 SP1
Created by: Telerik Admin
Comments: 2
Category: FormDecorator
Type: Bug Report
 FireFox 65 again changed its behavior and breaks the behavior of our 2019 R1 SP1 release., introducing a fix for the following bug:

If you are using the controls from 2019 R1 SP1 or later, you can use the following workaround in order to make the input elements visible until we include the fix internally:

<style> .t-ff input[type=checkbox].rfdRealInput, .t-ff input[type=radio].rfdRealInput { position: static; } </style>

Last Updated: 07 Jun 2019 07:52 by ADMIN
Created by: Vessy
Comments: 20
Category: FormDecorator
Type: Bug Report
The checkboxes decorated with RadFormDecorator appeared double in Classic rendering after upgrading to Firefox 63.

Steps to reproduce:
1. Upgrade to Firefox 63
2. Run the following setup
        <telerik:RadFormDecorator runat="server" DecoratedControls="CheckBoxes" RenderMode="Classic" />
        <asp:CheckBox ID="chkApproved" runat="server" Text="asp:Checkbox" />

        <div>Html Input</div>
        <input id="chkApproved1" type="checkbox" name="chkApproved" />


Solutions found so far:
1) Use RadFormDecorator in Lightweight RenderMode:
     <telerik:RadFormDecorator runat="server" RenderMode="Lightweight"/>

2) Set the RadFormDecorator's DecoratedControls="All":
     <telerik:RadFormDecorator runat="server" RenderMode="Classic" DecoratedControls="All"  />

3) Set the ControlsToSkip="CheckBoxes"
      <telerik:RadFormDecorator runat="server" RenderMode="Classic" ControlsToSkip="CheckBoxes"  />

4) Or add the following CSS overwrite to the page:
           .rfdCheckboxUnchecked, .rfdCheckboxChecked {
               padding: 0 !important;
               background-image: none !important;
Last Updated: 12 Apr 2019 16:34 by ADMIN
Created by: YOUNGKON
Comments: 3
Category: FormDecorator
Type: Bug Report
After upgrading to new version of Telerik (2016.3.914.35), duplicate checkboxes are displaying. Please refer attached file.
Last Updated: 12 Dec 2018 10:34 by ADMIN
Steps to reproduce:
1. Load on IE 11
2. Input two lines in the textarea
3.  Select the second line from right to left by holding the left mouse button and releasing it when the cursor is outside of the text area

4. Press button 'delete' from keyboard with multi select content 
=> result: Can not delete content

5. Press button 'backspace' from keyboard 
=> result: back from url....

The problem happens only in IE when there is a select element on the page and when the mouse goes outside the boundaries of the textarea.

Temporary fix:
       <telerik:RadFormDecorator RenderMode="Lightweight" ID="FormDecorator1" runat="server" DecoratedControls="all"></telerik:RadFormDecorator>
            Telerik.Web.UI.RadFormDecorator.prototype._selectBodyClickHandler = function (e) {

                var target =;

                //in chrome the A element is not focused by default
                if (! &&target && target.focus && target !== document.activeElement) {
                    try {
                    } catch (ex) { }

                if ($telerik.isTouchDevice) {
                    while (target.nodeType != 1 && target.nodeType != 9)
                        target = target.parentNode;

                //See if an optGroup label
                if (this._isSelectOptgroup(target)) {
                    //Do nothing

                //Check if clicked on a box
                var box = this._getDecoratedSelectBoxParent(target);

                if (box) {
                    if (this._isSelectElementDisabled(box) || box === target) return;
                    else this._optionClickHandler(e);
                    if (box.setActive && != "hidden") box.setActive();

                //Check if clicked on a select header
                var header = this._getDecoratedSelectHeaderParent(target);
                if (header) {
                    if (this._isSelectElementDisabled(header)) return;
                    else this._expandHeader(header);

                    if (header.setActive) header.setActive();
                    if (header.focus) header.focus();

                //else - just hide the popup
Last Updated: 16 Jul 2018 11:25 by ADMIN
A workaround is to add a CSS rule that provides a contrasting background color for the decorated checkbox. For example:

		.RadForm_Bootstrap .RadGrid .rfdToggleImage
			background-color: white;

This applies to Q3 2015 with RenderMode=Lightweight for the RadFormDecorator control. Older versions should be upgraded to the latest.
Last Updated: 25 Dec 2017 11:31 by ADMIN
The issue manifests under IE and Firefox when you change the selected radio button. It stems from any other control with RenderMode=Lightweight that brings the font icons the lightweight mode brings.

- use the same render mode for all the controls (for example, move the form decorator to RenderMode=Lightweight)
- OR, add the following CSS rule to your page to remove the font icon content from the radio buttons
        .RadForm .rfdRadioUnchecked.p-i-radio:before,
        .RadForm .rfdRadioUnchecked:before,
        .RadForm .rfdRadioChecked.p-i-radiobutton:before,
        .RadForm .rfdRadioChecked:before,
        .RadForm .rfdCheckboxChecked:before,
        .RadForm .rfdCheckboxUnchecked:before {
            content: "";
Last Updated: 01 Jun 2017 13:32 by ADMIN
RadFormDecorator with RenderMode="Classic" and Silk skin renders the backgrounds of the decorated textboxes/textarea elements in gray. The issue can be seen on

Workaround: To solve the issue, switch to Lightweight RenderMode or overwrite the gray background with the following CSS class:

        .RadForm.RadForm_Silk.rfdTextbox input[type="text"].rfdDecorated, .RadForm.RadForm_Silk.rfdTextbox input[type="password"].rfdDecorated, .RadForm.RadForm_Silk.rfdTextbox input[type="search"].rfdDecorated, .RadForm.RadForm_Silk.rfdTextbox input[type="url"].rfdDecorated, .RadForm.RadForm_Silk.rfdTextbox input[type="tel"].rfdDecorated, .RadForm.RadForm_Silk.rfdTextbox input[type="email"].rfdDecorated, .RadForm.RadForm_Silk.rfdTextarea textarea, .RadForm.RadForm_Silk.rfdTextarea textarea[disabled].rfdDecorated:hover, .RadForm.RadForm_Silk.rfdTextbox input[disabled][type="text"].rfdDecorated:hover, .RadForm.RadForm_Silk.rfdTextbox input[disabled][type="password"].rfdDecorated:hover, .RadForm.RadForm_Silk.rfdTextbox input[disabled][type="search"].rfdDecorated:hover, .RadForm.RadForm_Silk.rfdTextbox input[disabled][type="url"].rfdDecorated:hover, .RadForm.RadForm_Silk.rfdTextbox input[disabled][type="tel"].rfdDecorated:hover, .RadForm.RadForm_Silk.rfdTextbox input[disabled][type="email"].rfdDecorated:hover {
            background-color: white !important;
Last Updated: 21 Apr 2017 14:10 by Imported User
Created by: Marin Bratanov
Comments: 1
Category: FormDecorator
Type: Feature Request
At present, the MetroTouch scrollbars in the Lightweight RenderMode are dark (almost black). All metro-based skins must have gray scrollbars.

Scrollbars are usually considered part of the browser and users are used to them as they are by default. Thus, using the default browser scrollbars may be the best course of action:

<telerik:RadFormDecorator runat="server" ID="rfd1" RenderMode="Lightweight" ControlsToSkip="Scrollbars" Skin="MetroTouch" />

Alternatively, use a CSS rule like this to unify the metro-based scrolblars (replace MetroTouch with Metro for the Metro skin):

html.RadForm_MetroTouch.rfdScrollBars {
scrollbar-3dlight-color: #cbcbcb;
scrollbar-arrow-color: #787878;
scrollbar-base-color: #787878;
scrollbar-darkshadow-color: #a7a7a7;
scrollbar-face-color: #d5d5d5;
scrollbar-highlight-color: #e6e6e6;
scrollbar-shadow-color: #d5d5d5;
scrollbar-track-color: #f5f5f5; }

Last Updated: 21 Apr 2017 14:10 by ADMIN
RadFormDecorator does not update properly the state of the grid row checkboxes when Select all checkbox is clicked and the skin is different than Default.

video -

The bug is introduced with R1 2017 release.

Steps to reproduce:
1. Open
2. Click the "Select All" checkbox of the first Grid

Result: The row checkboxes are not checked

ISSUE 2: Batch Edit mode checkboxes are not updated. Change a few checkboxes in this demo, they all remain unchecked after you close the cell:
- remove the RadFormDecorator
- OR, have it skip checkboxes, e.g.: DecoratedControls="All" ControlsToSkip="CheckBoxes"
Last Updated: 09 Dec 2016 14:08 by ADMIN
For the time being you can capture the keypress event of the submitting button and cancel it only if the Enter key is pressed. For example:

        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
                Sys.Application.add_load(function () {
                    var decoratedButton = Telerik.Web.UI.RadFormDecorator.getDecoratedElement($get("<%=SearchButton.ClientID%>"));

                function cancelKeyPress() {
                    Array.forEach(arguments, function (element) {
                        $addHandler(element, "keypress", function (event) {
                            if (event.charCode == 13)

        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" />
        <asp:Panel ID="SearchPanel" runat="server" DefaultButton="SearchButton">
            <telerik:RadTextBox FocusedStyle-CssClass="textfocused" TabIndex="1" HoveredStyle-CssClass="texthover"
                ID="SearchText" runat="server" Width="200px" Height="22px" />
            <asp:Button ID="SearchButton" runat="server" Text="Search" TabIndex="3" OnClick="SearchButton_Click" OnClientClick="alert(1);return true;" />
Last Updated: 08 Dec 2016 15:07 by Jeff
For the time being you can use the following JavaScript workaround:
<html xmlns="">
<head id="Head1" runat="server">
	<script src="//"></script>
	<script src="//"></script>
	<form id="form1" runat="server">
		<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
		<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" />
			var removeCssClass = Sys.UI.DomElement.removeCssClass;
			Telerik.Web.UI.RadFormDecorator.prototype.set_elementDisabled = function (element, val) {
				var actor = element;
				var nextSibling = element.nextSibling;
				var type = element.type;

				if ((type == "checkbox" || type == "radio") && nextSibling && nextSibling.tagName == "LABEL") {
					actor = nextSibling;
				else if (type == "button" || type == "reset" || type == "submit" || element.tagName == "BUTTON") {
					var parent = element.parentNode;
					if (parent && parent.tagName == "A") {
						actor = parent;
						parent.disabled = val;
				if (val) addCssClass(actor, "rfdInputDisabled");
				else removeCssClass(actor, "rfdInputDisabled");
				try {
					if (!val && $telerik.isIE && actor.parentNode.disabled) {
						actor.parentNode.disabled = val;
				} catch (e) {
		<input type="button" value="Test" onclick="Run(); return false;" />
		<div id="TestDiv" style="display: none"></div>
		<script type="text/javascript">
			function Run() {
					modal: true,
					buttons: { "OK": function () { alert('bye'); } }
Last Updated: 14 Oct 2016 12:42 by ADMIN
Last Updated: 13 Oct 2016 08:36 by Jeremy
- use RenderMode="Lightweight"
- OR, set DecoratedControls="All"


			<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="Textbox,Textarea,Buttons,Scrollbars,Select,CheckBoxes,RadioButtons"
				 Skin="Default" RenderMode="Classic" />
			<div class="container body-content">
				<h2>First Application </h2>

				<br />
				<asp:RadioButtonList runat="server" ID="dlSchdId" RepeatColumns="6" RepeatDirection="Horizontal"
					<asp:ListItem Text="test 1"></asp:ListItem>
					<asp:ListItem Text="test 2"></asp:ListItem>

				<asp:CheckBox runat="server" ID="chk1" Text="Check Box 1" />
Last Updated: 26 Sep 2016 13:44 by ADMIN
When a page has FormDecorator with configured DecoratedControls="All" and a <select> element present on the page, clicking over an SVG causes a JS error.The issue is reproducible in Firefox.


Last Updated: 10 Sep 2016 07:27 by ADMIN
JavaScript error is thrown on the page, when a classic DropDownList is clicked in application running with .NET 3.5, debug mode.

Error message:

"Uncaught Sys.ParameterCountException: Sys.ParameterCountException: Parameter count mismatch."

Steps to reproduce:
1. Run this code with .NET 3.5 and <compilation debug="true">
        <asp:ScriptManager ID="sm" runat="server" ScriptMode="Debug">
        <telerik:RadFormDecorator runat="server" EnableRoundedCorners="true" DecoratedControls="All" />
        <asp:DropDownList runat="server">
            <asp:ListItem Text="text1" />
            <asp:ListItem Text="text2" />

2. Click the drop-down button.

Result: A JS error is thrown.

This happens because under .NET 3.5, in the .debug.js version of the MS AJAX scripts, the Function$emptyMethod() method RadFormDecorator uses has parameter validation and throws errors when you pass any arguments. This is not present in release and seems to not be present in newer versions of .NET
Last Updated: 01 Sep 2016 14:31 by ADMIN
Last Updated: 22 Jul 2016 08:43 by ADMIN
Created by: Henrik
Comments: 1
Category: FormDecorator
Type: Feature Request

Would you please concider adding styling of anchor elements to the formdecorator?

It would make it easier styling existing pages.
Last Updated: 06 Jun 2016 10:03 by ADMIN
For the time being you can use the following workaround:
		<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All"  RenderMode="Lightweight"/>
		<input id="mycb" type="checkbox" name="name" value="check here" title="some title" />
			Telerik.Web.UI.RadFormDecorator.prototype.configureLabel = function (label, input) {
				if (! label.setAttribute("id", "_rfdSkinned" +;

				input._rfddecoratedID =;
				if (

				input.className = "rfdRealInput";

				if (!input.myLabel) input.myLabel = label;
				label.className = this._skin;

				//check if the text attribute is missing a value (i.e. the innerHTML of the <label> is null) and add &nbsp; so as the label becomes clickable
				if (label.innerHTML == "") {
					label.innerHTML = "&nbsp;";

				var type = input.type;
				var inputName = type.charAt(0).toUpperCase() + type.substring(1);

				if (input.checked) {
					//removed the rendering of skin name from the rendered className string
					label.className = " rfd" + inputName + "Checked";
				else {
					//removed the rendering of skin name from the rendered className string
					label.className = " rfd" + inputName + "Unchecked";

				//check if the input is disabled (disabled="disabled")
				if (input.disabled) {
					//append a "disabled" class if the control is disabled
					label.className += " " + INPUT_DISABLED_CSSCLASS;
					label.setAttribute('disabled', 'disabled');
				if (input.title != "") {
					label.setAttribute('title', input.title);
Last Updated: 06 Jun 2016 10:01 by ADMIN
When decorated button is disabled on the client, its appearance is not changed under IE10. The issue is related only to the visual appearance and not to the functionality of the decorated button.
Last Updated: 25 Apr 2016 05:43 by ADMIN
For the time being the following CSS can be used:

        html.RadForm.rfdRadio.rfdLabel label {
            display: inline;
1 2 3