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 correct format should be ISO 8601:
([CreateDate] >= '2013-06-22T00.00.00') AND ([CreateDate] <= '2013-06-22T23.59.59'

Workaround: https://www.telerik.com/support/kb/aspnet-ajax/grid/details/get-sql-compliant-filterexpressions-from-radgrid

RadCheckBox is not firing the event for CheckedChanged the first time it is checked.

If you simply replace the RadCheckBox with a standard asp CheckBox all works as it should and the event is fired with the first click.

Steps to reproduce:
1. Open the demo page http://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx
2. Switch to the 'HTML' mode of the RTE and replace all existing HTML content with the following HTML snippet:
<div>text</div>

3. Switch to the 'Design' mode of the RTE and click once on the 'text' word;
4. Switch keyboard language to Japanese and select 'Hiragana' input type. Place focus on the 'text';
5. Type the 'a' and 'e' characters;

Expected result:
The 'あえ' characters are typed.

Actual result:
Just 'え' character is typed. The 'あ' character is replaced by the 'え'. 

Note:
The first character disappears.
You may need to try several times to reproduce the issue.
The issue is reproducible in Chrome (Version 54.0.2840.99 m).
The issue is not reproducible in Firefox and IE11.

Screencast reproduction: http://screencast.com/t/Lj6plU0di99



Workaround:

<telerik:RadEditor ID="RadEditor1" runat="server">
<Content><p>test</p></Content>
</telerik:RadEditor>

<script>
var editorPrototype = Telerik.Web.UI.RadEditor.prototype;
var onKeyDown = editorPrototype._onKeyDown;
editorPrototype._onKeyDown = function (e) {
if (e.composed) {
   this._pendingTextTypeCmd = {};
}
onKeyDown.call(this, e);
if (e.composed) {
   delete this._pendingTextTypeCmd;
}
};
</script>

There are missing methods in the TypeScript definitions provided. 

You can find attached a file that illustrates what needs to be updated.

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

When the Navigation control collapses into the hamburger menu keep the hover to expand the menu items functionality.

At present, when IE is in Compatibility Mode the UI for ASP.NET AJAX controls use the Classic RenderMode in all cases because of the User Agent string the browser provides.

If RenderMode="Lightweight" and the X-UA-Compatible meta tag with value "IE=edge" is present on the server, the controls will render in the Lightweight mode instead of falling back to Classic.
This will also apply to RenderMode="Auto".

The issue can be workarounded by calling preventDefault of the mousedown event when ComboBox item is clicked:
<telerik:RadScriptManager runat="server" />
<script>
	var onDocumentClick = Telerik.Web.UI.RadComboBox.prototype._onDocumentClick;
	Telerik.Web.UI.RadComboBox.prototype._onDocumentClick = function (e) {
		if (!e) e = event;

		var target = e.target || e.srcElement;

		while (target.nodeType !== 9) {
			if (!target.parentNode || target == this.get_element() || target == this.get_dropDownElement()) {
				e.preventDefault();
				return;
			}

			target = target.parentNode;
		}
		onDocumentClick.call(this, e);
	};
</script>

<telerik:RadComboBox ID="RadComboBox1" runat="server" RenderMode="Lightweight" OnClientBlur="OnClientBlur"
	CheckBoxes="true">
	<Items>
		<telerik:RadComboBoxItem Text="Item1" Value="1" />
		<telerik:RadComboBoxItem Text="Item2" Value="2" />
		<telerik:RadComboBoxItem Text="Item3" Value="3" />
		<telerik:RadComboBoxItem Text="Item4" Value="4" />
	</Items>
</telerik:RadComboBox>

<script>
	function OnClientBlur(sender, args) {
		console.log("Blur event");
	}
</script>

The Toolbar delete button is enabled only if the selected item's parent folder can be deleted, even if the file itself has delete permission.

Steps to reproduce:
1. Openthe following demo, the delete permissions ase given to the root "images" folder (DeletePaths="~/FileExplorer/Examples/Overview/images")
http://demos.telerik.com/aspnet-ajax/fileexplorer/examples/overview/defaultcs.aspx
2. Open the root folder from the tree (images)
3. Select an item from the grid

Actual: The Delete button is not enabled
Expected: The delete button is enabled, as the images folder is granted with delete permissions


WORKAROUND:
        <telerik:RadFileExplorer ID="RadFileExplorer1" runat="server" EnableCopy="True" EnableOpenFile="True" OnClientLoad="explorerLoad"
            Height="500px" Skin="Default" Configuration-MaxUploadFileSize="900000000">
            <Configuration  ViewPaths="~/Images_2" DeletePaths="~/Images_2" UploadPaths="~/Images_2" />
        </telerik:RadFileExplorer>
        <script>
            function explorerLoad(fileExplorer, args) {
                fileExplorer._fileList.add_itemSelect(Function.createDelegate(fileExplorer, function (fileList, args) {
                    fileExplorer._updateToolbar(null, null, args.get_item().get_permissions());
                    fileExplorer.raise_itemSelected(args.get_item());
                }));
            }
</script>

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>

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

It will be nice to have a countDown control with all the client/server events and the suite skins, which will enable the developer to show a visitor with a timer to complete a task (like finsih a purchase with a guranteed price for few minutes) and call a web service when the timer got to zero, and show a message to the client (with integrated Notificatoin object) about the price (changed or staed the same etc.) and let the developer decide if he wants to start the timer again or not.

Thanks,
ilan.

Steps to reproduce:
1. Insert a table
2. Select 2-3 cells
3. Press delete

Actual: There is an nbsp between the 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

 

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>

.NET provides a standard mechanism to resolve any needed assembly via the AssemblyResolve event (https://msdn.microsoft.com/en-us/library/system.appdomain.assemblyresolve(v=vs.110).aspx).
Besides self-implementing this event there are tools (like SmartAssembly) which use this mechanism.
We use this mechanism to make application deployment (including ASP.NET applications) as painless and easy as possible.

With Telerik ASP.NET this does not work :-(

Please provide some way/sample/API to make it possible to embed Telerik ASP.NET assemblies.

Thanks in advance.

Best Regards
Yahia El-Qasem

http://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx

       1. Insert the following html:
<div style="float: left;">
<img alt="" src="/aspnet-ajax/Editor/images/UserDir/Marketing/Tokyo.png" />
</div>

        2. Click the image and update it via ImageManager

Expected:

<div style="float: left;">
<img alt="" src="/aspnet-ajax/Editor/images/UserDir/Marketing/upload_100.png" />
</div>

Actual: 

<div style="float: left;">
</div>
<img alt="" src="/aspnet-ajax/Editor/images/UserDir/Marketing/upload_100.png" />