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 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: 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;
Last Updated: 19 Jan 2016 10:56 by ADMIN
            <telerik:RadSkinManager runat="server" ID="RadSkinManager1" ShowChooser="true" Skin="Bootstrap"></telerik:RadSkinManager>
            <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All"  RenderMode="Lightweight" />

            <asp:DropDownList ID="Dropdownlist1" runat="server" Width="300px">
                <asp:ListItem Text="text1" />
                <asp:ListItem Text="This is long text" />
                <asp:ListItem Text="text2" />
            <asp:Button ID="Button1" Text="text" runat="server" />

Expected: the decorated DDL is 300px wide in all skins and all font sizes

Actual: the decorated DDL is 275px wide with the Bootstrap skin.
Last Updated: 08 Jan 2016 14:53 by ADMIN
Workaround - Set the EnableScriptCombine property of RadScriptManager to false or remove RadFormDecorator.

Last Updated: 25 Nov 2015 09:05 by Rach
Last Updated: 06 Oct 2015 14:56 by ADMIN
Created by: Danail Vasilev
Comments: 0
Category: FormDecorator
Type: Bug Report
Issue is reproducible with the code below:

1) Run the code below.

2) Click on "Postback" button or select an item from the dropdown.

3) A sever-side error is thrown - "Collection was modified; enumeration operation may not execute."


    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
        <telerik:RadButton ID="RadButton1" runat="server" Text="Postback" />

        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All"></telerik:RadFormDecorator>

        <telerik:RadDropDownList ID="cbListeLigue" DataSourceID="DetailsViewDataSource" DefaultMessage="Choisir une ligue" runat="server" AutoPostBack="True" DataTextField="CustomerID" DataValueField="CustomerID" Text="Ligue"></telerik:RadDropDownList>

        <asp:SqlDataSource runat="server" ID="DetailsViewDataSource" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            ProviderName="System.Data.SqlClient" SelectCommand="Select [CustomerID], [CompanyName], [Address], [City], [PostalCode], [Country] From [Customers]"
            OldValuesParameterFormatString="original_{0}" ConflictDetection="CompareAllValues" />

        <asp:SqlDataSource runat="server" ID="FormViewDataSource" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            ProviderName="System.Data.SqlClient" SelectCommand="SELECT [OrderID], [CustomerID], [EmployeeID],[OrderDate] FROM [Orders] WHERE ([CustomerID] = @CustomerID)"
            OldValuesParameterFormatString="original_{0}" ConflictDetection="CompareAllValues">
                <asp:ControlParameter ControlID="cbListeLigue" Name="CustomerID" PropertyName="SelectedValue"

        <telerik:RadGrid ID="rGrid_ListeSaison" runat="server"
            DataSourceID="FormViewDataSource" AllowFilteringByColumn="True">
            <MasterTableView DataKeyNames="CustomerID" AutoGenerateColumns="false"
                    <telerik:GridDateTimeColumn DataField="OrderDate" UniqueName="OrderDate">
                    <%--<telerik:GridBoundColumn DataField="CustomerID" UniqueName="CustomerID"></telerik:GridBoundColumn>--%>

You can choose one of the following workarounds:

1) Set the ControlsToSkip="GridFormDetailsViews,LoginControls,ValidationSummary"  property of the decorator.

2) Set the AllowFilteringByColumn property of the grid to false.

3) Remove the GridDateTimeColumn column of the grid.
1 2