Typing a letter key must move the focus to the next instance of a visible node whose title begins with that printable letter.
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
In IE11, checkboxes are rendered as a flat style with a black checkmark, as apposed to the 3D look rendered by IE9. When using a RadTreeView with checkboxs and form decorator, the checkboxes are not styled to look like the 3D ones. Checkboxes that are not in trees are styled, and therefore, the checkboxes look differently. It's expecially apparent when both treed and non-tree checkboxes are on the same page. See my support ticket 815961 for my question about this.
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 attached sprite.
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>
For the time being the following CSS can be used: <style> html.RadForm.rfdRadio.rfdLabel label { display: inline; } </style>
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>
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>
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>
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>
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.
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.
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; }