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>
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.
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." ASPX: <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"> <SelectParameters> <asp:ControlParameter ControlID="cbListeLigue" Name="CustomerID" PropertyName="SelectedValue" Type="String"></asp:ControlParameter> </SelectParameters> </asp:SqlDataSource> <telerik:RadGrid ID="rGrid_ListeSaison" runat="server" DataSourceID="FormViewDataSource" AllowFilteringByColumn="True"> <MasterTableView DataKeyNames="CustomerID" AutoGenerateColumns="false" DataSourceID="FormViewDataSource"> <Columns> <telerik:GridDateTimeColumn DataField="OrderDate" UniqueName="OrderDate"> </telerik:GridDateTimeColumn> <%--<telerik:GridBoundColumn DataField="CustomerID" UniqueName="CustomerID"></telerik:GridBoundColumn>--%> </Columns> </MasterTableView> </telerik:RadGrid> </form> 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.
Workaround - Set the EnableScriptCombine property of RadScriptManager to false or remove RadFormDecorator.
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>
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>
The issue is reproducible when you add a CSS class, responsible for styling the scrollbars, too lately and can also be reproduced on a page that contains no Telerik UI for ASP.NET AJAX controls: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style> .RadForm.rfdScrollBars.RadForm_WebBlue div::-webkit-scrollbar, .RadForm.rfdScrollBars.RadForm_WebBlue div::-webkit-scrollbar-thumb:vertical, .RadForm.rfdScrollBars.RadForm_WebBlue div::-webkit-scrollbar-thumb:horizontal { background-color: red !important; /* choose your color */ } </style> </head> <body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> <script> setTimeout(function () { Sys.UI.DomElement.addCssClass(document.documentElement, "RadForm RadForm_WebBlue rfdScrollBars"); }, 10); </script> <div id="testDiv" style="overflow: scroll; height: 200px; width: 300px"> <table> <tr style="height: 500px;"> <td></td> </tr> </table> </div> </form> </body> </html> If you remove the timeout, however, the issue will be gone: <script> // setTimeout(function () { Sys.UI.DomElement.addCssClass(document.documentElement, "RadForm RadForm_WebBlue rfdScrollBars"); // }, 10); </script> Possible workarounds for scenarios when the RadFormDecorator control is involved: 1) Remove the scorllbars styling by setting the ControlsToSkip property to "Scrollbars". <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" ControlsToSkip="Scrollbars" /> 2) Use the following JavaScript workaround: <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> <telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="Glow"></telerik:RadSkinManager> <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" ControlsToSkip="Scrollbars" /> <script> //JavaScript workaround: Telerik.Web.UI.RadFormDecorator.removeGlobalClassesToRootElement = function (rootElement) { rootElement.className = rootElement.className.replace(/rfdRtl|RadForm_\w+|rfdButton|rfdZone|rfdLabel|rfdHeading|rfdTextbox|rfdTextarea|rfdFieldset|rfdRadio|rfdCheckbox|rfdGrids/g, "").trim(); }; Sys.UI.DomElement.addCssClass(document.documentElement, "RadForm RadForm_<%=RadSkinManager.GetCurrent(this.Page).Skin%> rfdScrollBars"); </script> <div id="testDiv" style="overflow: scroll; height: 200px; width: 300px"> <table> <tr style="height: 500px;"> <td></td> </tr> </table> </div> </form>
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>
For the time being the following CSS can be used: <style> html.RadForm.rfdRadio.rfdLabel label { display: inline; } </style>
For the time being you can use the attached sprite.
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>
For the time being you can use the following JavaScript workaround: <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title></title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> </head> <body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> </telerik:RadScriptManager> <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" /> <script> //Workaround: 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) { } } </script> <input type="button" value="Test" onclick="Run(); return false;" /> <div id="TestDiv" style="display: none"></div> <script type="text/javascript"> function Run() { $('#TestDiv').dialog({ modal: true, buttons: { "OK": function () { alert('bye'); } } }); } </script> </form> </body> </html>
When disabled radiobuttons are decorated by RafFormDecorator they are rendered as enabled in Internet Explorer 11. The issue could be worked around by setting "RadioButtons" to the ControlsToSkip attribute of the FormDecorator.