Changing the render mode of the Editor Dynamically on the server-side leads to a JavaScript error: Uncaught TypeError: Cannot read property 'render' of null at Telerik.Web.UI.Editor.Modules.RadEditorNodeInspector.render The issue is introduced in 2016 R3. Steps to reproduce: Run the following configuration: <telerik:RadEditor ID="RadEditor1" runat="server"></telerik:RadEditor> CS: protected void Page_Load(object sender, EventArgs e) { RadEditor1.RenderMode = Telerik.Web.UI.RenderMode.Mobile; }
The Editor's Insert External Video does not insert the required allowfullscreen="allowfullscreen" attribute into the iframe tag. You can see this in your demos
There are missing methods in the TypeScript definitions provided. You can find attached a file that illustrates what needs to be updated.
http://demos.telerik.com/aspnet-ajax/editor/examples/trackchanges/defaultcs.aspx Select all Try to change the selection Actual: Selection is not changed Expected: Selection is changed
Steps to reproduce: Insert a SELECT element containing some OPTION, select it and open InsertSelect dialog. Expected: The SELECT to be loaded to the dialog and edited after closing it. Actual: The SELECT is not loaded and a new SELECT has been inserted when closing the dialog. Workaround: <telerik:RadEditor ID="RadEditor1" runat="server" RenderMode="Lightweight"> <Tools> <telerik:EditorToolGroup> <telerik:EditorTool Name="InsertFormSelect"></telerik:EditorTool> </telerik:EditorToolGroup> </Tools> <Content> <p>Test</p> </Content> </telerik:RadEditor> <script type="text/javascript"> var editorPrototype = Telerik.Web.UI.RadEditor.prototype; var getSelectedElement = editorPrototype.getSelectedElement; editorPrototype.getSelectedElement = function (range) { var selected = getSelectedElement.call(this, range); return selected && selected.nodeName == "OPTION" ? selected.parentNode : selected; }; </script>
When a folder with upload permissions is selected (not opened) from the right side of FileExplorer the upload button gets enabled, even if the currently loaded folder does not have permissions. The issue is reproducible both in Grid and Thumbnails mode. Video: http://screencast.com/t/5zAPNESZ85i5
For the time being you can use the following workaround: <telerik:RadPushButton CssClass="fa bcmbutton" ID="btnAnimate" runat="server" Text="Save & Stay" AutoPostBack="false"> <Icon PressedCssClass="fa-cog" HoveredCssClass="hovClass" CssClass="rbOk" /> </telerik:RadPushButton> Workaround: <script> Telerik.Web.UI.Button.IconsUI.prototype.mouseover = function (ev) { var that = this, iconData = that.options.iconData, priIconEl = that.getPrimaryIconElement(), secIconEl = that.getSecondaryIconElement(), hoveredCssClass = that.options.iconData.primaryHoveredCssClass; if (hoveredCssClass) { $telerik.$(priIconEl).addClass(hoveredCssClass); } that._setBackground(priIconEl, iconData.primaryHoveredIconUrl); that._setBackground(secIconEl, iconData.secondaryHoveredIconUrl); that.base.mouseover(ev); }, Telerik.Web.UI.Button.IconsUI.prototype.mouseout = function (ev) { var that = this, iconData = that.options.iconData, priIconEl = that.getPrimaryIconElement(), secIconEl = that.getSecondaryIconElement(), hoveredCssClass = that.options.iconData.primaryHoveredCssClass; if (hoveredCssClass) { $telerik.$(priIconEl).removeClass(hoveredCssClass); } that._setBackground(priIconEl, iconData.primaryIconUrl); that._setBackground(secIconEl, iconData.secondaryIconUrl); that.base.mouseout(ev); }, Telerik.Web.UI.Button.IconsUI.prototype.mousedown = function (ev) { var that = this, iconData = that.options.iconData, priIconEl = that.getPrimaryIconElement(), secIconEl = that.getSecondaryIconElement(), pressedCssClass = that.options.iconData.primaryPressedCssClass; if (pressedCssClass) { $telerik.$(priIconEl).addClass(pressedCssClass); } that._setBackground(priIconEl, iconData.primaryPressedIconUrl); that._setBackground(secIconEl, iconData.secondaryPressedIconUrl); that.base.mousedown(ev); }, Telerik.Web.UI.Button.IconsUI.prototype.mouseup = function (ev) { var that = this, iconData = that.options.iconData, priIconEl = that.getPrimaryIconElement(), secIconEl = that.getSecondaryIconElement(), isHovered = that.isMouseOverElement(that.element, ev), priIconUrl = isHovered && iconData.primaryHoveredIconUrl ? iconData.primaryHoveredIconUrl : iconData.primaryIconUrl, secIconUrl = isHovered && iconData.secondaryHoveredIconUrl ? iconData.secondaryHoveredIconUrl : iconData.secondaryIconUrl, pressedCssClass = that.options.iconData.primaryPressedCssClass; if (pressedCssClass) { $telerik.$(priIconEl).removeClass(pressedCssClass); } that._setBackground(priIconEl, priIconUrl); that._setBackground(secIconEl, secIconUrl); that.base.mouseup(ev); }; </script>
In case, where paragraph(<p>) with style "font-style: normal" is nested inside table cell (<td>) with style "style="font-style: italic;" the command incorrectly displays that the content has italic decoration applied and if used the cell is split into three new cells.
Workaround: ControlsToSkip="TextArea" Steps to reproduce: <telerik:RadFormDecorator RenderMode="Lightweight" runat="server" EnableRoundedCorners="true" DecoratedControls="All" /> <telerik:RadEditor ID="RadEditor1" runat="server" RenderMode="Lightweight" AutoResizeHeight="true"> <Content> a<br/>a<br/>a<br/>a<br/> </Content> </telerik:RadEditor> 1. Set this content to a page 2. Toggle Preview mode Actual behavior: TextArea remain visible on the page as its styles get overriden Expected: TextArea is hidden
The droppdown tools of RadEditor are not fully visible when ToolbarMode = "RibbonBarFloating" in LightWight. Reproduction code: <telerik:RadEditor ID="reBody" runat="server" ToolbarMode="RibbonBarFloating" RenderMode="Lightweight"> </telerik:RadEditor>
When you enable the control's keyboard navigation, using the arrow keys for navigation does not work when you use NVDA screen reader.
The encountered issue stems due to inheritance of CSS rules that select globally table elements. For the time being you can use the following CSS reset to improve the layout of the Editor's table elements: .reLayoutWrapper, .reWrapper_corner, .reWrapper_center, .reLeftVerticalSide, .reRightVerticalSide, .reTlbVertical, .reToolCell, .reContentCell, .reToolZone, .reBottomTable, .reEditorModesCell, .reBottomZone, .reResizeCell { border: 0 none !important; padding: 0 !important; } .Telerik.reWrapper, .Telerik.RadEditor .reContentCell, .Telerik.reColorPicker, .Telerik.reInsertTable, .Telerik.reCustomLinks a:hover { border: 1px solid #828282 !important; } .reLeftVerticalSide, .reRightVerticalSide { padding: 1px !important; } Note that these CSS rules will affect RadEditor controls outside the RadGrid. If you need to modify only RadEditors inside RadGrid, use CssClass property and change the CSS selectors according the set class name. Also, upon the used color you may need to change the border-color according to the Skin design.