Using the RadEditor with Auto or Mobile mode in a RadWindow is impossible because JS error are thrown when dialog is shown. For the time being, the most proper solution for this case is using the Lightweight mode for RadEditor.
The NuGet packages should not install directories into the project. If these directories are not needed when referencing the dlls traditionally, I can't see why they are needed with the Nuget package. Adding nuget references to ASP.Net AJAX in a non-website/application project results in a silly set of directories. Like, if you want to write a plain assembly that simply uses the Telerik controls in a Server Control. An install.pl file should handle any web.config alteration on install. The
http://demos.telerik.com/aspnet-ajax/editor/mobile-examples/overview/default.aspx Error: Uncaught TypeError: Cannot read property 'Polling' of undefined
When adding a link with a class name, the Unlink command cannot remove the formatting.
Temporary solution is to clear anchor's classes programmatically via the ApplyClass command:
<telerik:RadEditor runat="server" ID="RadEditor1" OnClientCommandExecuting="OnClientCommandExecuting">
<Content>
<a href="http://www.telerik.com" class="my-class">link</a>
</Content>
</telerik:RadEditor>
<script type="text/javascript">
function OnClientCommandExecuting(sender, args) {
var command = args.get_commandName && args.get_commandName();
if (command === "Unlink") {
var myArgs = new Telerik.Web.UI.EditorCommandEventArgs("ApplyClass", null, "");
sender.fire("ApplyClass", myArgs);
}
}
</script>
The dragging clue element is shown before the actual dragging of the element in the Grid is initiated (immediately after the item is clicked). The problem is reproducible in Chrome. Comment: The problem is not reproducible in the following TreeView demo: http://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/draganddropnodes/defaultcs.aspx Steps to reproduce: 1. Open http://demos.telerik.com/aspnet-ajax/grid/examples/columns-rows/rows/drag-and-drop/defaultcs.aspx 2. Click over an item (just mouse-down, without moving the mouse nor full click) Result: The dragging clue is shown without actual moving of the mouse pointer
Cursor is placed in the next available element (e.g., <p>) instead of being placed right after the tab space in the same paragraph.
Possible workaround is to implement a custom command to be triggered with tab key press:
<telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad">
</telerik:RadEditor>
<script>
Telerik.Web.UI.Editor.CommandList["MyInsertTab"] = function (commandName, editor, oTool) {
var utils = Telerik.Web.UI.Editor.Utils;
var selecedElm = editor.getSelectedElement();
var blockElm = utils.isBlockElement(selecedElm) ? selecedElm : utils.getBlockParent(selecedElm);
var executeDefaultCommand = utils.isList(blockElm) ||
utils.isTag(blockElm, "LI") ||
utils.isTag(blockElm, "TD") ||
utils.isTag(blockElm, "TH");
if (executeDefaultCommand) {
editor.fire("InsertTab");
} else {
editor.pasteHtml("<span> </span>​", commandName);
}
};
function OnClientLoad(editor, args) {
var shortcutManager = editor.get_shortCutManager();
// Removing the InsertTabMozilla shortcut will
// assure that in Firefox the behavior will be consistent with IE.
shortcutManager.removeShortCut("InsertTabMozilla");
editor.addShortCut("MyInsertTab", "TAB");
}
</script>
Workaround:
<telerik:RadEditor ID="radEditor1" runat="server" EnableTrackChanges="true"
TrackChangesSettings-CanAcceptTrackChanges="true">
<Content>
<table>
<tbody>
<tr>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
<p>test paragraph</p>
</Content>
</telerik:RadEditor>
<script type="text/javascript">
(function ($T) {
var prototype = $T.Editor.DefaultToolAdapter.prototype;
var onContextMenu = prototype.onContextMenu;
prototype.onContextMenu = function (e) {
var editor = this.get_editor();
if (!editor.get_enableTrackChanges()) {
return onContextMenu.call(this, e);
}
if (!this._contextMenusEnabled || editor.get_mode() != $T.EditModes.Design) {
return;
}
this.createContextMenus();
var element = editor.getSelectedElement() || e.srcElement;
var contextMenus = this._contextMenus;
var contextElement = $T.Editor.Utils.getElementParentByCondition(element, function (node) {
return !!contextMenus[node.nodeName];
});
var contextMenuId = contextElement ? contextElement.nodeName : "*";
var parentTrackChangeEl = $T.Editor.TrackChangesUtils.findTrackChangesParentElement(element);
if (parentTrackChangeEl) {
if (parentTrackChangeEl.Type == $T.Editor.TrackChangesElementType.Comment)
contextMenu = this.createContextMenuWithTrackChangeCommentItems(contextMenuId);
else
contextMenu = this.createContextMenuWithTrackChangeItems(contextMenuId);
}
else {
contextMenu = this.createContextMenuWithTrackChangeDefaultItems(contextMenuId) || contextMenus[contextMenuId];
}
if (contextMenu) {
contextMenu.set_eventObject(e);
contextMenu.show();
}
return $telerik.cancelRawEvent(e);
};
})(Telerik.Web.UI)
</script>
The error is "Wrong Document". The dialog creates the table from different document instead of the document of the RadEditor's content area.
Here is the workaround:
<script type="text/javascript">
Telerik.Web.UI.InsertTableLight.prototype.getModifiedTable = function(tableToModify){
var rowCount = parseInt(this._rowsCount.value, 10);
var colCount = parseInt(this._colsCount.value, 10);
if (!tableToModify && !(isNaN(rowCount) || isNaN(colCount))) {
tableToModify = this._editor.get_document().createElement("table");
this._originalRowsCount = 0;
this._originalColsCount = 0;
}
if (!tableToModify) return;
var originalRowsCount = this._originalRowsCount;
var originalColsCount = this._originalColsCount;
if (rowCount > 0 && rowCount != originalRowsCount) {
rowCount > originalRowsCount ? this.addRowsCols(tableToModify, originalRowsCount, rowCount, true) : this.removeRowsCols(tableToModify, originalRowsCount, rowCount, true);
}
if (colCount > 0 && colCount != originalColsCount) {
colCount > originalColsCount ? this.addRowsCols(tableToModify, originalColsCount, colCount, false) : this.removeRowsCols(tableToModify, originalColsCount, colCount, false);
}
this._setAttribValue(tableToModify, "align", this._alignmentSelectorTable.getAlign());
var oSpacing = parseInt(this._cellSpacing.value, 10);
if (!isNaN(parseInt(oSpacing, 10))) this._setAttribValue(tableToModify, "cellSpacing", oSpacing >= 0 ? oSpacing : "", (oSpacing >= 0));
var oPadding = parseInt(this._cellPadding.value, 10);
if (!isNaN(parseInt(oPadding, 10))) this._setAttribValue(tableToModify, "cellPadding", oPadding >= 0 ? oPadding : "", (oPadding >= 0));
var oBorderWidth = parseInt(this._borderWidth.value, 10);
if (!isNaN(parseInt(oBorderWidth, 10))) this._setAttribValue(tableToModify, "border", oBorderWidth >= 0 ? oBorderWidth : "", (oBorderWidth >= 0));
return tableToModify;
}
</script>
Enabling Fluid behavior of RadEditor (Width="100%") causes the tools not to collapse with a smaller view-port. Also, there are some further visual glitches with the toolbar.
Solution 1: Add a CSS rule to expand the height of the tool-groups automatically.
.<SkinName>.reToolbar {
height:auto !important;
}
Solution 2: Enable Lightweight rendering (or Auto).
<telerik:RadEditor ID="RadEditor1" Skin="Silk" RenderMode="Lightweight" runat="server" Width="100%" >
</telerik:RadEditor>
It is design limitation. The format is not not applied because the context menu is single for all columns, but each column can have different format. The DateInput inside the filter menu can not have multiple formats at the same time.