Hello. Would you please concider adding styling of anchor elements to the formdecorator? It would make it easier styling existing pages.
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" /> <script> Telerik.Web.UI.RadFormDecorator.prototype.configureLabel = function (label, input) { if (!label.id) label.setAttribute("id", "_rfdSkinned" + input.id); input.setAttribute("_rfddecoratedID", label.id); input._rfddecoratedID = label.id; if (input.id) label.setAttribute("for", input.id); 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 so as the label becomes clickable if (label.innerHTML == "") { label.innerHTML = " "; } 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); } } </script>
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.
For the time being the following CSS can be used: <style> html.RadForm.rfdRadio.rfdLabel label { display: inline; } </style>
<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:DropDownList> <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.
Workaround - Set the EnableScriptCombine property of RadScriptManager to false or remove RadFormDecorator.
For the time being the select can be skipped from decoration: <telerik:RadFormDecorator runat="server" ID="rfd" DecoratedControls="All" ControlsToSkip="Select"/> There is also a script attached that provides a workaround for this issue.
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>
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 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>