TrackChange commands for Table

[Emin Sadigov]

Hello, as I read from https://docs.telerik.com/devtools/aspnet-ajax/controls/editor/functionality/track-changes-and-comments/track-changes#supported-commands only some track change commands are available.

For example, Delete row or column is not tracking.

So, I wanted to create workaround, which cancels row deletion and instead remove content of the cells (in TrackChange mode just mark as deleted). 

I just have the following idea, but it is not delete text:

function OnClientCommandExecuting(editor, args) {
    var commandName = args.get_commandName();
    var tool = args.get_tool();   
    var value = args.get_value();

    if (commandName === "DeleteRow") {
        args.set_cancel(true);
        var range = editor.getSelection().getRange();
        var tableRow = range.commonAncestorContainer;
        while (tableRow && tableRow.tagName !== "TR") {
            tableRow = tableRow.parentNode;
        }

        if (tableRow) {
            var cells = tableRow.cells;
            for (var i = 0; i < cells.length; i++) {
                var cellContent = cells[i].innerHTML;
                var cellRange = editor.get_document().createRange();
                cellRange.selectNodeContents(cells[i]);
                editor.getSelection().selectRange(cellRange);
                editor.executeCommand("Backspace", false, true);
            }
        }
    }
}

Any ideas to fix? Is it more easy solution? May be add to TR attribute "data-del" and define it in css? Is it possible to resolve it in backend? 

Thank you!

 

 

[Rumen]

Hi Emin,

You are correct that the DeleteRow command is not supported by RadEditor's track changes functionality. Your approach to cancel the row deletion and instead mark the content of the cells as deleted is a good workaround. However, there are a few adjustments that I would like to suggest to improve the script:

<script>
    function OnClientCommandExecuting(editor, args) {
        var commandName = args.get_commandName();

        if (commandName === "DeleteRow") {
            args.set_cancel(true); // Prevent the default row deletion

            // Get the current selection range
            var range = editor.getSelection().getRange();
            var tableRow = range.commonAncestorContainer;

            // Traverse up to find the TR element
            while (tableRow && tableRow.tagName !== "TR") {
                tableRow = tableRow.parentNode;
            }

            if (tableRow) {
                var cells = tableRow.cells;
                var userName = "RadEditorUser"; // Replace with the actual user name if available
                var timestamp = new Date().toISOString();
                var timestampMs = Date.now();

                // Iterate over each cell in the row
                for (var i = 0; i < cells.length; i++) {
                    var cellContent = cells[i].innerHTML;

                    // Construct the <del> element with required attributes
                    var delTag = `<del title="Deleted by ${userName} on ${timestamp}" timestamp="${timestampMs}" command="Delete" class="reU0" author="${userName}">${cellContent}</del>`;

                    // Replace the cell content with the <del> element
                    cells[i].innerHTML = delTag;

                    // Optionally, add a data attribute to the row for backend processing
                    tableRow.setAttribute("data-del", "true");
                }
            }
        }
    }
</script>
<telerik:RadEditor RenderMode="Lightweight" ID="theEditor" EnableTrackChanges="true" runat="server" Width="750px" OnClientCommandExecuting="OnClientCommandExecuting"
	Height="400px" ToolsFile="ToolsFile.xml">
	<TrackChangesSettings Author="RadEditorUser" CanAcceptTrackChanges="true" UserCssId="reU0"></TrackChangesSettings>
	<Content>
		<ins author="RadEditorUser" command="Insert" timestamp="1720093274355" title="Inserted by RadEditorUser on 7/4/2024, 2:41:14 PM" class="reU0">
			<table style="width: 329px; height: 168px;">
				<tbody>
					<tr>
						<td>test&nbsp;</td>
						<td>&nbsp;</td>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td>test&nbsp;</td>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td>&nbsp;</td>
						<td>&nbsp;test</td>
					</tr>
				</tbody>
			</table>
			</ins>
	</Content>
</telerik:RadEditor>

Regards,
Rumen
Progress Telerik