Completed
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.
Approved
Last Updated: 06 Oct 2015 12:04 by ADMIN
Approved
Last Updated: 06 Oct 2015 06:56 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: FormDecorator
Type: Bug Report
0
For the time being you can manually increase the width of the decorated select:
ASPX:
		<script>
			function pageLoad() {
				increaseWidth($telerik.$('.rfdSelect'), 68);
			}
			function increaseWidth(element, increase) {
				element.css('width', parseInt(element.css('width').replace('px', '')) + increase + 'px');
			}
		</script>
<telerik:RadFormDecorator ID="decor" runat="server" DecoratedControls="All" Skin="BlackMetroTouch"  />
<asp:DropDownList ID="ddlASPNET" runat="server"></asp:DropDownList>
C#:
		protected void Page_Load(object sender, EventArgs e)
		{
			var dt = Getdata();

			ddlASPNET.DataSource = dt;
			ddlASPNET.DataTextField = "Name";
			ddlASPNET.DataValueField = "ID";
			ddlASPNET.DataBind();
		}

		private DataTable Getdata()
		{
			DataTable dt = new DataTable();
			dt.Columns.Add("ID");
			dt.Columns.Add("Name");

			for (int i = 1; i <= 100; i++)
			{
				DataRow dr = dt.NewRow();
				dr["ID"] = i.ToString();
				if (i % 2 > 0)
					dr["Name"] = string.Format("Test Name # {0}", i);
				else
					dr["Name"] = string.Format("aaaaaaaaaaaaaa bbbbbbbbbbbbbTest Name Unmodule # {0}", i);

				dt.Rows.Add(dr);
			}
			return dt;

		}
Approved
Last Updated: 20 Oct 2015 08:25 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: FormDecorator
Type: Bug Report
0
For the time being you can use the following CSS workaround:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title></title>
	<style>
		.RadForm.rfdButton input[disabled="disabled"].rfdDecorated {
			background-position: left -22px !important;
		}
	</style>
</head>
<body>
	<form id="form1" runat="server">
		<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
		<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" />
		<asp:Button ID="Button1" Text="text" runat="server" Enabled="false" />
	</form>
</body>
</html>
Completed
Last Updated: 27 Aug 2015 06:17 by ADMIN
Workaround - avoid scrollbar decoration:

<telerik:RadFormDecorator runat="server" ID="rfd1" DecoratedControls="All" Skin="Default" ControlsToSkip="Scrollbars" />

Reproduction Steps:

1) Open the code below in Chrome with Telerik UI 2015.2.729 version.

2) Scroll till you reach the second blue div with the button.

3) Click the button to make an AJAX request.

4) Actual - the page is scrolled to the end of the first inner div. Expected - the page should not be scrolled.

       <telerik:RadFormDecorator runat="server" ID="rfd1" DecoratedControls="All" Skin="Default" />
        <div style="width: 600px; height: 500px; border: 3px solid green; overflow: scroll;">
            <div style="height: 1000px; border: 3px solid red;"></div>
            <asp:UpdatePanel ID="Updatepanel1" runat="server">
                <ContentTemplate>
                    <div style="height: 300px; border: 3px solid blue;">
                        <telerik:RadButton ID="RadButton1" runat="server" Text="Click" />
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
Completed
Last Updated: 27 Aug 2015 07:57 by ADMIN
Workaround - set the ControlsToSkip="Select" property of the decorator:
ASPX:
		<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
		<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" ControlsToSkip="Select" />
		<asp:DropDownList ID="Dropdownlist1" runat="server">
			<asp:ListItem Text="text1" />
			<asp:ListItem Text="text2" />
		</asp:DropDownList>
		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
			<PlotArea>
				<Series>
					<telerik:ColumnSeries Name="Series 1">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="30" />
							<telerik:CategorySeriesItem Y="10" />
							<telerik:CategorySeriesItem Y="20" />
						</SeriesItems>
					</telerik:ColumnSeries>
				</Series>
				<XAxis>
					<LabelsAppearance RotationAngle="33"></LabelsAppearance>
					<Items>
						<telerik:AxisItem LabelText="Item 1" />
						<telerik:AxisItem LabelText="Item 2" />
						<telerik:AxisItem LabelText="Item 3" />
					</Items>
				</XAxis>
			</PlotArea>
		</telerik:RadHtmlChart>
Approved
Last Updated: 16 Feb 2015 12:21 by ADMIN
For the time being you can use the following CSS:
    <style>
        a.rfdSelect.rfdSelect_Default {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
ASPX:
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" RenderMode="Lightweight" />
        <asp:DropDownList ID="Dropdownlist1" runat="server">
            <asp:ListItem Value="" Text="(Not Completed)">
            </asp:ListItem>
            <asp:ListItem Value="2" Text="Equipment Note ttttttttttt tttttttttt tt tt" Selected="true">
            </asp:ListItem>
            <asp:ListItem Value="3" Text="Test">
            </asp:ListItem>
            <asp:ListItem Value="4" Text="Hello">
            </asp:ListItem>
        </asp:DropDownList>
Completed
Last Updated: 04 Sep 2013 14:51 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: FormDecorator
Type: Bug Report
0
A possible workaround is to avoid the decoration of button controls by setting RadFormDecorator's ControlsToSkip property to "Buttons". 
Completed
Last Updated: 11 Aug 2015 14:06 by ADMIN
Completed
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">
            <script>
                Sys.Application.add_load(function () {
                    var decoratedButton = Telerik.Web.UI.RadFormDecorator.getDecoratedElement($get("<%=SearchButton.ClientID%>"));
                    cancelKeyPress(decoratedButton);
                });

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

            </script>
        </telerik:RadCodeBlock>
        <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;" />
        </asp:Panel>
Completed
Last Updated: 03 Jun 2014 07:30 by ADMIN
Won't Fix
Last Updated: 14 Oct 2015 06:25 by ADMIN
For the time being you can manually add/remove the outline style for the focus state of the checkboxes/radio buttons:
CSS:
	<style>
		.rfdRealInput:focus {
			outline: 1px dotted !important;
		}

		.outlineClass {
			outline: 1px dotted !important;
		}
	</style>
JavaScript:
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script>
		function pageLoad() {
			$('input[type=checkbox],input[type=radio]').each(function () {
				this.addEventListener('focus', function () { addOutlineClass(this) });
				this.addEventListener('blur', function () { removeOutlineClass(this) });
			});
		}
		function addOutlineClass(checkbox) {
			$(checkbox.nextSibling).addClass("outlineClass");
		}

		function removeOutlineClass(checkbox) {
			$(checkbox.nextSibling).removeClass("outlineClass");
		}
	</script>
ASPX:
		<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
		</telerik:RadScriptManager>
		<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" />
		<asp:TextBox ID="Textbox1" runat="server" />
		<asp:RadioButtonList ID="Radiobuttonlist1" runat="server">
			<asp:ListItem Text="text1" />
			<asp:ListItem Text="text2" />
		</asp:RadioButtonList>
		<asp:CheckBoxList ID="Checkboxlist1" runat="server">
			<asp:ListItem Text="text1" />
			<asp:ListItem Text="text2" />
		</asp:CheckBoxList>
Completed
Last Updated: 25 Apr 2016 05:43 by ADMIN
For the time being the following CSS can be used:

    <style>
        html.RadForm.rfdRadio.rfdLabel label {
            display: inline;
        }
    </style>
Declined
Last Updated: 21 Jul 2014 10:26 by ADMIN
Declined with the following reason: elements are styled through CSS cascade. In order to handle that you can override explicitly RadFormDecororator's styles. For example:
CSS:
	<style>
		@media screen and (-webkit-min-device-pixel-ratio:0) {
			.RadForm.rfdCheckbox input[type="checkbox"].rlbCheck,
			.RadForm.rfdCheckbox input[type="checkbox"].radPreventDecorate,
			.RadForm.rfdCheckbox input[type="radio"].radPreventDecorate {
				width: 13px;
				height: 13px;
			}

			.RadForm.rfdCheckbox input[type="checkbox"].rlbCheck,
			.RadForm.rfdCheckbox input[type="checkbox"].radPreventDecorate {
				-webkit-appearance: checkbox;
			}

			.RadForm.rfdCheckbox input[type="radio"].radPreventDecorate {
				-webkit-appearance: radio;
			}
		}
	</style>
ASPX:
	<form id="form1" runat="server">
		<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
		<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" Skin="Silk" />
		<input type="radio" name="radio-set" id="Radio1" class="radPreventDecorate" />
		<input type="checkbox" name="checkbox-set" id="Checkbox1" class="radPreventDecorate" />
		<telerik:RadListBox ID="RadListBox1" runat="server" CheckBoxes="true">
			<Items>
				<telerik:RadListBoxItem Text="item 1" />
				<telerik:RadListBoxItem Text="item 2" />
				<telerik:RadListBoxItem Text="item 3" />
			</Items>
		</telerik:RadListBox>
	</form>
Won't Fix
Last Updated: 14 Jan 2016 18:03 by ADMIN
ADMIN
Created by: Rumen
Comments: 1
Category: FormDecorator
Type: Bug Report
0

			
Completed
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.

video: http://screencast.com/t/FfrGSxCV


Completed
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.
Completed
Last Updated: 05 May 2015 13:28 by Elena
The disabled inputs should be darker so it is visually clear that you cannot enter text in them. This does not happen with some skins (e.g. Windows7) with the lightweight rendermode.
Declined
Last Updated: 01 Nov 2013 13:06 by ADMIN
Rejected with the following comment:

When trying to enable/disable an input element that is decorated with RadFormDecorator, the disabled attribute must be set to the DOM input element and not to the JavaScript input object, in order for the RadFormDecorator to take effect. For example:
ASPX:
<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" />
<telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" OnClientClicked="disableCheckBox" Text="click" />
<input type="checkbox" id="checkbox" name="name" value="sdf" checked="checked" />
JavaScript:
function disableCheckBox() {
    var checkbox1 = $telerik.$('#checkbox');
    //Either
    //checkbox1.prop('disabled', 'disabled');
    //OR
    checkbox1[0].disabled = true;
}
In IE there is an issue with the disabled property of the DOM elements, when it comes to tracking it. This issue is reproduced only when the element is enabled and should become disabled. The other way around the tracking is working, i.e. if the select is disabled it can be enabled and IE will raise an event about it. This is a browser issue and there is nothing that can be done on our side to work around it.
1 2 3