Completed
Last Updated: 30 Jun 2022 04:09 by ADMIN
ADMIN
Nikolay
Created on: 04 Feb 2016 15:42
Category: UI for ASP.NET AJAX
Type: Bug Report
3
Cannot delete a table using delete or backspace key
Deleting of a table by delete or backspace key does not work when the selection contains only the table.
Steps to reproduce:
1. Set the following content
<p>test p1</p>
<table>
    <tbody>
        <tr>
            <td>test</td>
            <td>test</td>
        </tr>
    </tbody>
</table>
<p>test p2</p>

2. Select the table only and press delete or backspace key

Actual: Only the content has been deleted.
Expected: The table and its content to be deleted.

Workaround:
<telerik:RadEditor ID="RadEditor1" runat="server">
</telerik:RadEditor>

<script type="text/javascript">
	(function () {
		var $T = Telerik.Web.UI;
		var utils = $T.Editor.Utils;

		var isTableSelected = function (selected) {
			if (utils.isTag(selected, "table")) {
				return true;
			}
			var table = utils.getElementParentByTag(selected, "TABLE");
			return table && !!utils.getElementParentByCondition(selected, function (current) {
				return utils.isAncestorOrSelf(table, current) && utils.isSingleChild(current);
			});
		};

		// Fix for delete table by delete or backspace key
		var formatFragments = $T.Editor.DeleteSelectionCommand.prototype.formatFragments;
		$T.Editor.DeleteSelectionCommand.prototype.formatFragments = function (fragments) {
			var cmd = this;
			var selected = cmd.get_editor().getSelectedElement();

			if (isTableSelected(selected) && fragments.length) {
				var table = utils.isTag(selected, "table") ? selected : utils.getElementParentByTag(selected, "TABLE");
				var $table = $telerik.$(table);
				var data = $table.find("th,td");
				var firstCell = data.first().get(0);
				var lastCell = data.last().get(0);
				var firstFragment = fragments[0];
				var lastFragment = fragments[fragments.length - 1];
				var firstSelected = firstFragment.nodes[0];
				var lastSelected = lastFragment.nodes[lastFragment.nodes.length - 1];

				if ((firstSelected == firstCell || firstSelected == firstCell.firstChild || cmd.isMarker(firstCell.firstChild)) &&
					(lastSelected == lastCell || lastSelected == lastCell.lastChild)) {
					$table.find("." + cmd.getMarkersCssClass()).insertBefore(table);
					$telerik.$(table).remove();
					return;
				}
			}
					
			formatFragments.call(cmd, fragments);
		};

		// Fix for select and delete a table by the DomInspector in Chrome
		var Modules = $T.Editor.Modules;
		if (Modules && Modules.RadEditorDomInspector) {
			var removeSelectedElement = Modules.RadEditorDomInspector.prototype.removeSelectedElement;
			Modules.RadEditorDomInspector.prototype.removeSelectedElement = function (element) {
				if (isTableSelected(element)) {
					element = utils.isTag(element, "table") ? element : utils.getElementParentByTag(element, "TABLE");
				}
				removeSelectedElement.call(this, element);
			};
		}
	})();
</script>
3 comments
ADMIN
Rumen
Posted on: 30 Jun 2022 04:09

Hi Kevin,

Just click on the Table Select button on the left and the Table delete button will appear on its right side. For your convenience, I have recorded a short video: http://youtu.be/EhnepF9XCUw?hd=1

Best Regards,
Rumen
Progress Telerik

The Premier Dev Conference is back! 

Coming to you live from Progress360 in-person or on your own time, DevReach for all. Register Today.


Kevin Neumann
Posted on: 29 Jun 2022 17:02
Is the solution posted in 2016 still relevant? Looking at the demo site Telerik Web UI Editor Overview Demo | Telerik UI for ASP.NET AJAX, the Red X to delete the table does not show up.
Attached Files:
ADMIN
Rumen
Posted on: 06 Jun 2016 15:34
Starting from R2 (Q2) 2016, the editor offers built-in option for selecting and deleting standalone table elements: http://screencast.com/t/jozLrPuqBrCq